[data-search-clearable] > input:not([type="hidden"]) {
    min-width: 0;
}

[data-search-clearable] > svg {
    flex-shrink: 0;
}

.search-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    cursor: pointer;
    opacity: .6;
}

.search-clear[hidden] {
    display: none;
}

.search-clear:hover,
.search-clear:focus-visible {
    opacity: 1;
    background: rgba(255, 255, 255, .08);
}

.search-clear:focus-visible {
    outline: 2px solid #91ffa9;
    outline-offset: 2px;
}