.input{
    --input-bg: 242,245,245;
    @screen lg{
        --input-bg: 255,255,255;
    }
    &__label{
        @apply font-bold mb-3.75 block;
    }
    &__field{
        @apply border-y border-grey-200 relative;
        input, select{
            @apply w-full appearance-none bg-transparent h-9 text-grey-300 placeholder-grey-300;
            &:-webkit-autofill{
                -webkit-box-shadow: 0 0 0 30px white inset !important;
                &:hover, &:focus, &:active{
                    -webkit-box-shadow: 0 0 0 30px white inset !important;
                }
            }, 
            &[type="search"]{
                &:focus{
                    @apply text-black;
                }
                &::-webkit-search-decoration, &::-webkit-search-cancel-button, &::-webkit-search-results-button,
                &::-webkit-search-results-decoration {
                    @apply hidden;
                }
            }
        }
        &::before{
            content: '';
            background: linear-gradient(90deg, rgba(var(--input-bg),0) 0%, rgba(var(--input-bg),1) 25%);
            @apply w-24 h-[calc(100%-2px)] absolute right-0 top-px pointer-events-none;
        }
        &::after{
            content: '';
            background-image: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 37 37'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='m18.504 21.319 5.66-5.241.68.733-6.34 5.87-6.34-5.87.68-.733 5.66 5.24Z' fill='%23000'/%3E%3C/svg%3E");
            @apply absolute right-0 top-0 bg-no-repeat bg-contain w-9 h-9 pointer-events-none;
        }
        &.is-filled{
            input,select{
                @apply text-black;
            }
            .input__clear{
                @apply block;
            }
        }
    }
    &__search{
        &:before{
            content: none;
        }
        &::after{
            background-image: url("data:image/svg+xml,%3Csvg width='37' height='37' viewBox='0 0 37 37' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16.5 24C20.6421 24 24 20.6421 24 16.5C24 12.3579 20.6421 9 16.5 9C12.3579 9 9 12.3579 9 16.5C9 20.6421 12.3579 24 16.5 24ZM16.5 25C21.1944 25 25 21.1944 25 16.5C25 11.8056 21.1944 8 16.5 8C11.8056 8 8 11.8056 8 16.5C8 21.1944 11.8056 25 16.5 25Z' fill='black'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M22.8555 22.1465L29.3555 28.6465L28.6484 29.3536L22.1484 22.8536L22.8555 22.1465Z' fill='black'/%3E%3C/svg%3E%0A");
        }
    }
    &__clear{
        background-image: url("data:image/svg+xml,%3Csvg width='37' height='37' viewBox='0 0 37 37' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M24.8607 12.8432L12.8399 24.8641L12.1328 24.157L24.1536 12.1361L24.8607 12.8432Z' fill='black'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.8425 12.1368L24.8634 24.1576L24.1562 24.8647L12.1354 12.8439L12.8425 12.1368Z' fill='black'/%3E%3C/svg%3E");
        @apply hidden absolute w-9 h-9 right-9 top-0 bg-contain;
        &::after{
            content: '';
            @apply absolute right-0 top-1.5 w-px h-6 bg-grey-400;
        }
    }
    @at-root :where(body.has-primary-bg) .block-filters .block-filters__inner .input{
        --input-bg: 255,204,0;
        &__field{
            @apply border-yellow-300;
            input, select{
                @apply text-yellow-400 placeholder-yellow-400;
                &:-webkit-autofill{
                    -webkit-box-shadow: 0 0 0 30px theme(colors.yellow.100) inset !important;
                    &:hover, &:focus, &:active{
                        -webkit-box-shadow: 0 0 0 30px theme(colors.yellow.100) inset !important;
                    }
                }  
            }
        }
        &__clear{
            &::after{
                @apply bg-yellow-300;
            }
        }    
    }
    &--lg{
        .input__field{
            input, select{
                @apply h-16 text-size-md;
            }
            &::after{
                top: 50%;
                transform: translateY(-50%);
                @apply w-12.5 h-12.5;
            }
        }
        .input__clear{
            top: 50%;
            transform: translateY(-50%);
            @apply w-12.5 h-12.5 right-12.5;
            &::after{
                @apply h-[38px];
            }
        }
    }
}

:root{
    --input-toggle-bg: theme(colors.grey.200);
    --input-toggle-slider-bg: theme(colors.grey.300);
    
    --input-toggle-active-bg: theme(colors.black);
    --input-toggle-active-slider-bg: theme(colors.white);
}
.input-toggle{
    @apply inline-block w-12 h-[1.375rem] rounded-full relative overflow-hidden cursor-pointer;
    input{
        @apply opacity-0 h-0 w-0;
        &:checked + span{
            background: var(--input-toggle-active-bg);
            &::before{
                background: var(--input-toggle-active-slider-bg);
                left: unset;
                @apply right-px;
            }
            &::after{
                background-image: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2.521 5.983.525 3.987 0 4.52l2.523 2.523L8 1.53 7.473 1 2.521 5.983Z' fill='%23000'/%3E%3C/svg%3E");
                right: unset;
                @apply left-2;
            }
        }
    }
    span{
        background: var(--input-toggle-bg);
        @apply absolute top-0 left-0 bottom-0 right-0;
        &::before{
            content: '';
            background: var(--input-toggle-slider-bg);
            @apply absolute left-px top-px h-5 w-5 rounded-full cursor-pointer;
        }
        &::after{
            content: '';
            background-image: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='m8.331 1.355-6.977 7.02-.705-.709L7.626.646l.705.709Z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='m1.353.646 6.978 7.02-.705.71-6.978-7.02.705-.71Z' fill='%23000'/%3E%3C/svg%3E");
            @apply w-2.5 h-2.5 bg-contain absolute right-2 position-center-vertical;
        }
    }
}