/**
 * Card Sort Shared v1.5.0 (30.09.2026)
 *
 * The sort control is ONE native <select>, styled plain from design tokens:
 * no pill, no icons, no chevron drawing, no panel. Figtree via var(--ds-font),
 * colours from the token palette only, 44px hit area, 10px radius (button token).
 * Consumers that emit their own <select class="select"> are styled by
 * deal-design-system components.css (.ds2 .select); this file only covers the
 * select that core builds itself for the older consumers.
 */

.cs-sort-wrapper {
    display: inline-flex;
    align-items: center;
}

.cs-sort-wrapper .cs-select {
    min-height: 44px;
    padding: 0 12px;
    background: var(--ds-surface, #FFFFFF);
    color: var(--ds-ink, #16201B);
    border: 1px solid var(--ds-line, #D9E0DC);
    border-radius: var(--ds-r-btn, 10px);
    font-family: var(--ds-font, "Figtree", system-ui, sans-serif);
    font-size: 15px;
    font-weight: 600;
    line-height: 22px;
    cursor: pointer;
    max-width: 100%;
}

.cs-sort-wrapper .cs-select:hover {
    border-color: var(--ds-muted, #56635B);
}

.cs-sort-wrapper .cs-select:focus-visible {
    outline: 3px solid var(--ds-g600, #1F7A46);
    outline-offset: 2px;
}

.cs-sort-wrapper .sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* FLIP animation support: cards being animated get will-change for GPU compositing */
[data-sort-original-index] {
    will-change: auto;
}