@use "sass:math";
/* variables specific to current element */

$search-input-height-large:  56px;

.#{$namespace}searchbar {

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

	$self: &;

	/* properties of current element  + media queries */
	flex-grow: 1;
	border-radius: map-deep-get($design-tokens, "comp-search-border-radius");
	position: relative;
	z-index: z("zero");

	/* 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 */

	// search__inner
	&__inner {

		display: flex;
		align-items: center;
		padding-left: map-deep-get($design-tokens, "comp-search-inset-h-l");
		padding-right: map-deep-get($design-tokens, "comp-search-inset-h-r");
		padding-block: 0;
		border-radius: inherit;
		border: 0;
		@include custom-prop-fallback("height", "comp-search-medium-height");
		position: relative;

		&::after {
			content: "";
			display: block;
			position: absolute;
			z-index: z("negative");
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			box-shadow: map-deep-get($token-shadow-map, "active");
			border-radius: inherit;
		}

	}

	// search__inputWrapper
	&__inputWrapper {

		flex: 1 1 auto;
		display: flex;
		align-items: center;
		gap: map-deep-get($design-tokens, "comp-search-left-container-inline");
		height: 100%;
	}

	// search__input
	&__input {

		background-color: transparent !important;
		border: none;
		@include custom-prop-fallback("color", "comp-search-filled-text-color");
		height: inherit;

		&::placeholder,
		&::-webkit-input-placeholder,
		&::-moz-placeholder,
		&:-ms-input-placeholder {
			@include custom-prop-fallback("color", "comp-search-enabled-text-color");;
		}
	}

	&__actions {

		display: flex;
		align-items: center;
		flex-shrink: 0;
		gap: map-deep-get($design-tokens, "comp-search-container-tailing-inline");

	}

	&__searchIcon {

		@include custom-prop-fallback("color", "comp-search-icon-text-color");
		width: map-deep-get($design-tokens, "comp-search-icon-size");
		height: map-deep-get($design-tokens, "comp-search-icon-size");
	}

	&__clear,
	&__searchBtn {

		display: none;

	}

	/* modifiers */

	&.-searchbarSm {

		#{$self}__inner {
			@include custom-prop-fallback("height", "comp-search-height");
		}

	}

	&.-searchbarIsFocused,
	&:has(#{$self}__input:focus-visible) {

		#{$self}__inner {

			outline-width: map-deep-get($design-tokens, "comp-search-focused-border-width");
			outline-color: map-deep-get($design-tokens, "comp-search-focused-border-color");
			outline-style: solid;

		}

		#{$self}__input {
			@include custom-prop-fallback-override("comp-search-filled-text-color", "comp-search-focused-typing-text-color");
		}

	}

	&.-searchbarClearActive {

		#{$self}__clear,
		#{$self}__searchBtn {

			display: inline-flex;

		}

	}

	&.-searchbarPerformVisible {

		#{$self}__searchBtn {

			display: none;

		}

	}

	&[data-scope="sunken"] {

		#{$self}__inner {
			&::after {
				opacity: 0;
			}
		}

		&.-searchbarIsFocused,
		&:has(#{$self}__input:focus-visible) {

			#{$self}__inner {
				&::after {
					opacity: 1;
				}
			}

		}

	}

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

	/* Pseudo Classes */

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

		}
	}

	&:focus {
	}

	&:active {
	}

	&:focus,
	&:active {
	}

}