.input{
    &__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;
                }
            }
        }
        &::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{
        &::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) .input{
        &__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;
            }
        }    
    }
}