// -------------------------------------------------------------------
// :: SEARCH
// -------------------------------------------------------------------

// this component extends from the .a-input atom

.a-search{
	margin-bottom: 0 !important;


	&--rounded {
		.a-search__button {
			border-radius: 0 rem(24px) rem(24px) 0 !important;
		}

		.a-search__field {
			border-radius: rem(24px) !important;
		}
	}
}

.a-search__field{
	padding: 0.4rem 3.5rem 0.5rem 1rem !important;
}

.a-search__button{
	text-decoration: none;
	position: absolute !important;
	display: block;
	height: 100%;
	width: 3rem;
	text-align: center;
	top: 0;
	right: 0;
	padding-right: 0.4rem;
	font-size: 1.3rem;
	line-height: 2.4rem;
	border-left: 1px solid $border-color;
	color: $font-color;
	border-radius: 0 rem(3px) rem(3px) 0;
	transition: all 0.2s ease-in;

	&:hover{
		background-color: $secondary-color;
		border-left-color: $secondary-color;
		color: $white;
	}
}