@use '_theme.scss';

.search {
	display: flex;

	.search-input{
		font-size: var(--text-size-regular);
		border: 1px solid var(--color-line);
		border-top-left-radius: var(--button-border-radius);
		border-bottom-left-radius: var(--button-border-radius);
		color:  var(--text-color-dark);
		height: 35px;

		&::placeholder {
			color:  var(--text-color-medium);
			font-size: var(--text-size-regular);
			opacity:1;
		}

		&:focus::placeholder {
			opacity: 0;
		}
	}

	.search-button {
		background: var(--button-primary-background-color);
		border-top-right-radius: var(--button-border-radius);
		border-bottom-right-radius: var(--button-border-radius);
		border: none;
		position: relative;
		left: -1px;
		height: 35px;
		width: 50px;
		display: flex;

		.search-icon-container {
			cursor: pointer;
			margin: auto;

			.search-icon {
				vertical-align: baseline;

				path {
					fill: var(--button-primary-text-color);
				}
			}
		}
	}

	@media (max-width: theme.$lg) {
		position: absolute;
		width: 100%;
		background: var(--color-fill);
		top: var(--header-height-mobile);
		left: 0;
		padding: 12px 20px;
		z-index: 2;
		box-shadow: 0 5px 15px -5px #000000;

		&.search-visible {
			display: flex;
		}

		&.search-hidden {
			display: none;
		}
	}
}
