// ============================================================================
// :: SEARCH
// ============================================================================

// ============================================================================
// :: Elements
// ============================================================================
.m-search__buttons {
	position: relative;
}

// ============================================================================
// :: Modifiers
// ============================================================================
.m-search__button--open,
.m-search__button--close {
	transition: opacity 0.3s ease-in-out 1s, color 0.2s ease-in-out, background-color 0.3s ease-in-out;
}

.m-search__button--close {
	position: absolute;
	top: 0;
	left: 0;

	background-color: $background-color-white;
	opacity: 0;

	pointer-events: none;

	&::before {
		display: none;

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

			background: $background-color-white;
		}
	}

	.a-button__text,
	.a-button__icon {
		color: $text-color;

		@include respond-at($screen-medium-base) {
			color: $text-color;
		}
	}

	.a-button__icon {
		transform-origin: center center;

		transition: transform 0.2s ease-in-out;
	}

	&:hover {

		.a-button__icon {
			transform: rotate(90deg);
		}
	}
}

.m-search__button--open {
	pointer-events: auto;
}

// .m-search--inverted {

//   .m-search__button--open {
//     color: $text-color;
//     background: $background-color-white;

//     .a-button__icon {
//       color: $text-color;
//     }

//     &:hover {
//       color: $text-color-primary;

//       .a-button__icon::before {
//         color: $text-color-primary;
//       }
//     }
//   }

//   .m-search__button--close {

//     @include respond-at($screen-medium-base) {
//       background-color: $background-color-primary;
//       color: $text-color-white;
//     }

//     .a-button__icon {

//       @include respond-at($screen-medium-base) {
//         color: $text-color-white;
//       }
//     }
//   }
// }

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

	&.is-closed {

		.m-search__button--open {
			opacity: 0;

			pointer-events: none;
		}

		.m-search__button--close {
			opacity: 1;

			pointer-events: auto;
		}
	}
}