// Core CSS.
@import url('../style.scss');

.stc-search {
	display: inline-block;
    position: relative;

	.stc-search-input {
		width: 740px;
		padding: 16px 22px 16px 44px;
		opacity: 1;
		font-size: var(--stc-font-size-s);
		border: var( --stc-search-input-border, none );
		font-weight: var(--stc-font-weight-normal);
		border-radius: var(--stc-border-radius-4, 4px);
		background: var(--stc-background-primary);
		box-shadow: var( --stc-search-input-box-shadow, 0px 0px 4px -1px rgb(0 0 0 / 6%), 0px 2px 6px -1px rgb(0 0 0 / 10%) );
		height: var( --stc-search-input-height, 62px );

		&:focus {
			outline: none;
			border: var( --stc-search-input--focus-border, none );
		}

		&:hover,
		&:active,
		&:focus {
			box-shadow: 0px 2px 6px -1px rgb(0 0 0 / 6%), 0px 4px 8px -1px rgb(0 0 0 / 10%);
		}

		&::-webkit-input-placeholder {
			color: var( --stc-color-placeholder );
			font-size: var( --stc-font-size-xs );
		}

		&::-webkit-search-cancel-button {
			display: none;
		}
	}

	&.stc-search-have-input .stc-search-input:focus + .stc-search-icon,
	&.stc-search-have-input .stc-search-input:hover + .stc-search-icon {
		--stc-search-icon-opacity: 0;
		--stc-search-icon-visibility: hidden;
	}

}

.stc-search-icon,
.stc-cross-icon {
	top: 0;
	bottom: 0;
	padding: 0;
	left: 18px;
	border: none;
	line-height: 0;
	position: absolute;
	background: var( --stc-search-icon-background, 0 0);
	color: var( --stc-color-light-gray );
	opacity: var( --stc-search-icon-opacity, 1 );
	visibility: var( --stc-search-icon-visibility, visible );

	&:focus,
	&:hover {
		background: transparent;
		box-shadow: none;
	}

	svg {
		fill: var( --stc-color-placeholder );
	}
}

.stc-search-icon {
	svg {
		width: 14px;
	}
}

.stc-cross-icon {
	display: none;
	cursor: pointer;
}

.stc-search-have-input {
	.stc-cross-icon {
		display: block;
	}
	.stc-search-icon {
		display: none;
	}
}
