@import '_theme.scss';

.search {
    .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: 1px solid var(--button-primary-border-color);
		height: 35px;
		width: 48px;

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

			.search-icon {
				vertical-align: baseline;
				stroke: var(--button-primary-text-color);
			}
		}
	}

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