/* variables specific to current element */

$padding-right-input: calc(map-deep-get($token-spacer-unit-map, "64") + map-deep-get($token-spacer-unit-map, "40"));

.#{$namespace}searchGrowing {

	/* Save root element context for easy access if nesting is needed */

	$self: &;


	/* properties of current element  + media queries */
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: flex-end;
	width: auto;
	height: $input-height;

	/* Pseudo Elements */

	&::before {
	}

	&::after {
	}

	/*
	Include elements that are linked to the current element but have to reside at the root level of the stylesheet
	(e.g: keyframes)
	*/
	@at-root {
	}


	/* children - write selector in full in comments in order to facilitate search */

	// searchGrowing__childElement
	&__btn {

		z-index: z("low");

	}

	&__btnSmall {

		font-weight: map-deep-get($token-font-weight-map, "semi-bold") !important;
		font-size: map-deep-get($token-font-size-map, "body", "xs");
		max-height: map-deep-get($token-spacer-unit-map, "32");
		min-height: map-deep-get($token-spacer-unit-map, "32");
		position: absolute;
		right: map-deep-get($token-spacer-unit-map, "4");
		top: 50%;
		transform: translateY(-50%);

	}

	&__search {

		position: absolute;
		top: 50%;
		right: 0;
		transform: translateY(-50%);
		width: auto;
		transition: all .3s ease-out;

	}

	&__searchInner {

		position: relative;

	}

	&__icon {

		position: absolute;
		z-index: z("low");
		left: map-deep-get($token-spacer-unit-map, "8");
		top: 50%;
		transform: translateY(-50%);
		color: map-deep-get($token-color-brand-map, "secondary", "60");

	}

	&__input {

		height: map-deep-get($token-spacer-unit-map, "40");
		border-radius: map-deep-get($token-radius-map, "button-small");
		border-bottom: 0;
		background-color: map-deep-get($token-color-brand-map, "secondary", "10");
		padding-left: map-deep-get($token-spacer-unit-map, "48");

		&:focus {

			background-color: map-deep-get($token-color-brand-map, "secondary", "10");

		}

	}

	&__btnClose {

		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		transition: all 0.3s ease-out;

		[class*="icon"]::before {

			font-size: map-deep-get($token-font-size-map, "body", "xl");

		}

	}

	&__search,
	&__btnClose {

		visibility: hidden;

	}


	/* modifiers */

	// searchGrowing -open
	&.-open {

		//width: 320px;
		transition: all .3s ease-out;

		#{$self}__btn {

			display: none;

		}

		#{$self}__search {

			width: 328px;
			padding-right: map-deep-get($token-spacer-unit-map, "48");

		}

		#{$self}__input {

			padding-right: $padding-right-input;

		}

		#{$self}__btnClose {

			right: 0;
			transform: translate(-15%,-50%);

		}

		#{$self}__search,
		#{$self}__btnClose {

			visibility: visible;

		}

	}

	&.-searchInitiated {
		#{$self}__btnClose {
			background-color: map-deep-get($token-color-grayscale-map, "0");
		}
	}

	&.-bgWhite {

		#{$self}__input {

			background-color: map-deep-get($token-color-grayscale-map, "0");
			border: $border-width*2 solid $border-color;

		}

	}

	/* random parent element */
	/*
	*
	*   Syntax : .randomParentElt & {}
	*
	*/

	/* Pseudo Classes */

	&:hover {
		@media (hover: hover) {

		}
	}

	&:focus {
	}

	&:active {
	}

	&:focus,
	&:active {
	}

}