@layer components{.filter-input{font-family:var(--font-sans);font-size:.625rem;font-weight:500;line-height:1.5;color:rgba(0,0,0,.8);background-color:rgba(0,0,0,0);border:.4px solid rgba(0,0,0,.5);border-radius:12px;padding:.25rem .5rem;width:100%;min-width:0;max-width:120px;appearance:textfield;transition:border-color .15s ease}html.dark .filter-input{color:#fff;border-color:hsla(0,0%,100%,.5)}.filter-input:focus{outline:none;border-color:var(--color-accent)}.filter-input::placeholder{color:rgba(0,0,0,0)}.filter-input::-webkit-inner-spin-button,.filter-input::-webkit-outer-spin-button{appearance:none;margin:0}@media(width >= 48rem){.filter-input{padding:.5rem .75rem .25rem 1rem;border:.6px solid rgba(0,0,0,.5);border-radius:16px;font-size:.875rem;line-height:1.2}}.filter-input__label{position:absolute;inset-inline-start:.5rem;inset-block-start:50%;transform:translateY(-50%);padding-inline:.25rem;color:#91a0b9;background:hsla(0,0%,100%,.8);font-size:.625rem;font-weight:500;pointer-events:none;transition:inset-block-start 150ms ease,transform 150ms ease,font-size 150ms ease}html.dark .filter-input__label{background:#150e24;color:#fff}.filter-input:focus+.filter-input__label,.filter-input:not(:placeholder-shown)+.filter-input__label{inset-block-start:0;transform:translateY(-50%);font-size:.5625rem}@media(width >= 48rem){.filter-input__label{inset-inline-start:.75rem;font-size:.875rem}.filter-input:focus+.filter-input__label,.filter-input:not(:placeholder-shown)+.filter-input__label{font-size:.5625rem}}}