@keyframes tdr-search-open {
    from {
        opacity: 0;
        clip-path: inset(0 0 0 calc(100% - 44px) round var(--border-radius));
    }
    to {
        opacity: 1;
        clip-path: inset(0 0 0 0 round var(--border-radius));
    }
}

@keyframes tdr-search-toggle-in {
    from {
        opacity: 0;
        transform: scale(0.6) rotate(-45deg);
    }
}

@keyframes tdr-search-close {
    from {
        opacity: 1;
        clip-path: inset(0 0 0 0 round var(--border-radius));
    }
    to {
        opacity: 0;
        clip-path: inset(0 0 0 calc(100% - 44px) round var(--border-radius));
    }
}

.tdr-search {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 0 0 auto;
    min-width: 0;
}

.tdr-search.is-open {
    flex: 1 1 auto;
}

.tdr-search__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--side-border);
    border-radius: var(--middle-border);
    background: var(--bgc-app);
    color: var(--text-white);
    cursor: pointer;
    transition:
        transform var(--motion-fast) var(--ease-out),
        border-color var(--motion-fast) var(--ease-out);
}

.tdr-search__toggle svg {
    width: var(--size-icons-xs);
    height: var(--size-icons-xs);
}

@media (hover: hover) {
    .tdr-search__toggle:hover {
        border-color: var(--text-grey);
    }
}

.tdr-search__toggle:active {
    transform: scale(0.94);
}

.tdr-search__toggle:focus-visible,
.tdr-search__clear:focus-visible {
    outline: 2px solid var(--text-tunedr);
    outline-offset: 2px;
}

.tdr-search__toggle[hidden],
.tdr-search__bar[hidden],
.tdr-search__icon[hidden],
.tdr-search__clear[hidden] {
    display: none;
}

.tdr-search__bar {
    display: grid;
    grid-template-columns: var(--size-icons-xs) 1fr var(--size-icons-xs);
    align-items: center;
    gap: 8px;
    width: var(--full-width);
    min-width: 0;
    margin: 0;
    padding: 12px 16px;
    box-sizing: border-box;
    border: 1px solid var(--side-border);
    border-radius: var(--border-radius);
    background: var(--bgc-input-div);
    transition: border-color var(--motion-fast) var(--ease-out);
}

.tdr-search.is-open:not(.tdr-search--persistent) .tdr-search__bar {
    animation: tdr-search-open var(--motion-base) var(--ease-out) both;
}

.tdr-search.is-open.is-closing:not(.tdr-search--persistent) .tdr-search__bar {
    animation: tdr-search-close var(--motion-base) var(--ease-in-out) both;
}

.tdr-search__toggle.is-appearing {
    animation: tdr-search-toggle-in var(--motion-base) var(--ease-out) both;
}

.tdr-search__bar:focus-within {
    border-color: var(--text-grey);
}

.tdr-search__icon,
.tdr-search__bar .tdr-spinner {
    grid-column: 1;
    grid-row: 1;
}

.tdr-search__input {
    grid-column: 2;
    grid-row: 1;
}

.tdr-search__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-grey);
}

.tdr-search__icon svg,
.tdr-search__clear svg {
    width: var(--size-icons-xs);
    height: var(--size-icons-xs);
    pointer-events: none;
}

.tdr-search__input {
    appearance: none;
    width: var(--full-width);
    min-width: 0;
    padding: 0;
    border: none;
    outline: none;
    background: transparent;
    color: var(--text-white);
    font-family: var(--font-family-app);
    font-size: max(16px, var(--font-size-text));
}

.tdr-search__input::placeholder {
    color: var(--text-grey);
}

.tdr-search__input::-webkit-search-cancel-button,
.tdr-search__input::-webkit-search-decoration {
    appearance: none;
}

.tdr-search__clear {
    grid-column: 3;
    grid-row: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--size-icons-xs);
    height: var(--size-icons-xs);
    padding: 0;
    border: none;
    border-radius: var(--middle-border);
    background: none;
    color: var(--text-grey);
    cursor: pointer;
    transition: color var(--motion-fast) var(--ease-out);
}

@media (hover: hover) {
    .tdr-search__clear:hover {
        color: var(--text-white);
    }
}

@media (min-width: 768px) {
    .tdr-search.is-open {
        flex: 0 1 420px;
    }

    .tdr-search--persistent.is-open {
        flex: 1 1 auto;
    }
}