.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]; } } } }