.header-search {
    --default: #F0F0F0;
    --placeholder:#999;
    --height: 39px;
    --search-icon: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.5605 15.4394L13.7528 11.6317C14.5395 10.4459 15 9.02619 15 7.49994C15 3.36444 11.6355 -6.10352e-05 7.5 -6.10352e-05C3.3645 -6.10352e-05 0 3.36444 0 7.49994C0 11.6354 3.3645 14.9999 7.5 14.9999C9.02625 14.9999 10.446 14.5394 11.6318 13.7527L15.4395 17.5604C16.0245 18.1462 16.9755 18.1462 17.5605 17.5604C18.1462 16.9747 18.1462 16.0252 17.5605 15.4394ZM2.25 7.49994C2.25 4.60494 4.605 2.24994 7.5 2.24994C10.395 2.24994 12.75 4.60494 12.75 7.49994C12.75 10.3949 10.395 12.7499 7.5 12.7499C4.605 12.7499 2.25 10.3949 2.25 7.49994Z' fill='%233366FF'/%3E%3C/svg%3E");
    display: inline-block;
    position: relative;
    
    input {
        width:var(--width);
        padding-left: 20px;
        padding-right: 20px;
        height: var(--height);
        background-color: var(--default);
        border: 0;
        border-radius: var(--height);
        transition: ease all 0.4s;

        &::placeholder {
            font-size: 1.125em;
            font-weight:400;
            line-height: 1.534em;
            color:var(--placeholder)
        }

        &:focus-visible {
            outline: 0;
            box-shadow: 1px 1px 2px 1px #00000026;
            transition: ease all 0.4s;
        }
    }

    button {
        background-image: var(--search-icon);
        background-color: var(--default);
        position:absolute;
        right:20px;
        top:calc(var(--height) / 2);
        transform:translateY(-50%);
        height:18px;
        width:18px;
        border:0;
    }
}