// ============================================================================
// :: HELPER
// ============================================================================
.m-helper {
	position: fixed;
	bottom: 2rem;
	right: 3rem;
	z-index: $z-index-higher;

	display: none;

	@include respond-at($screen-medium-base) {
		display: block;
	}
}

// ============================================================================
// :: Elements
// ============================================================================
.m-helper__button-container {
	position: relative;

	width: auto;

	&::before {
		display: none;
	}
}

.m-helper__button {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 6rem;
	height: 6rem;

	border-radius: $border-radius-round;
	background: $gradient-primary;
	box-shadow: $box-shadow;

	.a-button__icon {
		margin: 0;

		//important to overwrite the button before class
		font-size: $font-size-3x-large !important; /* stylelint-disable-line */

		color: $text-color-white;
		opacity: 1;

		transform: scale(1);
		transform-origin: center;

		transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
	}
}

.m-helper__content {
	position: absolute;
	top: -2rem;
	right: 0;

	width: 20rem;

	background-color: $background-color-white;
	box-shadow: $box-shadow;

	transform: translateY(-100%);
	transform-origin: bottom;

	.m-collapse__content__container {
		padding: 2rem;
	}
}

.m-helper__list {

	@for $i from 1 through 10 {

		.m-list__item:nth-child(#{$i}) {
			transition: transform 0.3s ease-in-out $i * 0.08s, opacity 0.3s ease-in-out $i * 0.08s;
		}
	}

	.m-list__item {
		opacity: 0;

		transform: translateY(-1rem);
	}
}

.m-helper__close {
	position: absolute;
	top: calc(50% + 1rem);
	left: 50%;
	z-index: $z-index-high;

	width: 2.5rem;

	height: 2rem;
	margin-right: 1rem;

	transform: translateX(-50%) translateY(-50%);
	transform-origin: center;

	pointer-events: none;

	i {
		position: absolute;

		width: 100%;

		height: 0.3rem;

		border-radius: 0.5rem;

		background-color: $background-color-white;

		transform-origin: center;

		transition: transform 0.2s ease-in-out;

		&:nth-child(1) {
			transform: rotateZ(45deg) scaleX(0);
		}

		&:nth-child(2) {
			transform: rotateZ(-45deg) scaleX(0);
		}
	}
}

// ============================================================================
// :: States
// ============================================================================
.m-helper {

	&.is-open {

		.m-helper__button {

			.a-button__icon {
				opacity: 0;

				transform: scale(0);
			}
		}

		.m-helper__close {
			display: block;


			i {

				&:nth-child(1) {
					transform: rotateZ(45deg) scaleX(1);
				}

				&:nth-child(2) {
					transform: rotateZ(-45deg) scaleX(1);
				}
			}
		}

		.m-helper__list {

			.m-list__item {
				opacity: 1;

				transform: translateY(0);
			}
		}
	}
}