.template-switcher {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-width: 116px;
    height: 36px;
    gap: 7px;
    padding: 0 30px 0 11px;
    color: #334155;
    background: #fff;
    border: 1px solid #dbe2ea;
    border-radius: 6px;
    cursor: pointer;
}

.template-switcher__label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.template-switcher__select {
    width: 100%;
    min-width: 0;
    color: inherit;
    background: transparent;
    border: 0;
    outline: 0;
    appearance: none;
    cursor: pointer;
    font: inherit;
}

.template-switcher__select:focus-visible {
    outline: 2px solid #0284c7;
    outline-offset: 4px;
    border-radius: 2px;
}

.template-switcher__chevron {
    position: absolute;
    right: 10px;
    font-size: 10px;
    pointer-events: none;
}

.template-switcher:has(.template-switcher__select:disabled) {
    opacity: .65;
    cursor: wait;
}

@media (max-width: 480px) {
    .template-switcher {
        min-width: 42px;
        width: 42px;
        padding: 0;
        justify-content: center;
    }

    .template-switcher__select,
    .template-switcher__chevron {
        position: absolute;
        inset: 0;
        width: 100%;
        opacity: 0;
    }
}