.vi-filter-input{align-items:center;background:var(--color-white);border-radius:8px;box-shadow:0 10px 20px #0000000a,0 2px 6px #0000000a,0 0 1px #0000000a;display:flex;min-width:300px;overflow:hidden;padding:12px;position:relative;transition:.25s all var(--ease-in-out-quad)}.vi-filter-input.focus{box-shadow:0 12px 24px #0000000f,0 4px 8px #0000000f,0 1px 2px #0000000f}.vi-filter-input.focus .icon{opacity:0;transform:translate(-16px)}.vi-filter-input.focus input{transform:translate(-28px)}.vi-filter-input.focus .vi-btn.small{opacity:1;visibility:visible}.vi-filter-input.focus.has-value .clear-btn{opacity:.6;transform:translate(-36px);visibility:visible}.vi-filter-input.has-value .clear-btn{opacity:.6;visibility:visible}.vi-filter-input .icon{color:var(--color-text-extra-light);margin-right:.75rem}.vi-filter-input .icon,.vi-filter-input .icon svg,.vi-filter-input input{transition:.25s all var(--ease-in-out-quad)}.vi-filter-input input{border:none;box-sizing:border-box;width:100%}.vi-filter-input input:focus{border:none;outline:none}.vi-filter-input .vi-btn{opacity:0;position:absolute;right:4px;top:4px;transition:.25s all var(--ease-in-out-quad);visibility:hidden}.vi-filter-input .vi-btn svg{height:16px;width:16px}.vi-filter-input .vi-btn.small{padding:8px}.vi-filter-input .clear-btn{cursor:pointer;display:flex;opacity:0;transition:all .2s ease-in-out;visibility:hidden}.vi-filter-input .clear-btn svg{color:var(--color-text-light)}.vi-filter-input .clear-btn:hover{opacity:1}