/**
 * Unified Input Styles
 * Standardized design for sliders (range) and dropdowns (select).
 * Tokens live in /styles/tokens.css; the --ui-* names below are aliases
 * declared there so this file's selectors resolve without local copies.
 */

/* ═══════════════════════════════════════════════════════════════
   SLIDERS (input[type="range"])
   ═══════════════════════════════════════════════════════════════ */

.ui-slider {
    -webkit-appearance: none;
    appearance: none;
    width: var(--range-width, 100%);
    height: var(--ui-slider-track-height);
    background: var(--ui-slider-track-bg);
    border-radius: calc(var(--ui-slider-track-height) / 2);
    outline: none;
    cursor: pointer;
    transition: background 0.2s ease;
    margin: 8px 0;
}

.ui-slider:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* Webkit (Chrome, Safari, Edge) */
.ui-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: var(--ui-slider-thumb-size);
    height: var(--ui-slider-thumb-size);
    background: var(--ui-slider-thumb-bg);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: var(--ui-slider-thumb-shadow);
    transition: transform 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275), background 0.15s ease;
    border: none;
}

.ui-slider:hover::-webkit-slider-thumb {
    transform: scale(1.15);
}

.ui-slider:active::-webkit-slider-thumb {
    transform: scale(1.3);
    background: var(--ui-accent-color);
}

/* Firefox */
.ui-slider::-moz-range-thumb {
    width: var(--ui-slider-thumb-size);
    height: var(--ui-slider-thumb-size);
    background: var(--ui-slider-thumb-bg);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: var(--ui-slider-thumb-shadow);
    transition: transform 0.15s ease, background 0.15s ease;
    border: none;
}

.ui-slider:hover::-moz-range-thumb {
    transform: scale(1.15);
}

.ui-slider:active::-moz-range-thumb {
    transform: scale(1.3);
    background: var(--ui-accent-color);
}

.ui-slider::-moz-range-track {
    background: var(--ui-slider-track-bg);
    height: var(--ui-slider-track-height);
    border-radius: calc(var(--ui-slider-track-height) / 2);
    border: none;
}

.ui-slider::-moz-range-progress {
    background: var(--ui-accent-color);
    height: var(--ui-slider-track-height);
    border-radius: calc(var(--ui-slider-track-height) / 2);
}

/* ═══════════════════════════════════════════════════════════════
   DROPDOWNS (select)
   ═══════════════════════════════════════════════════════════════ */

.ui-select {
    height: 28px;
    background: var(--ui-input-bg);
    border: 1px solid var(--ui-input-border);
    border-radius: 6px;
    color: var(--ui-input-text);
    font-size: 12px;
    padding: 0 24px 0 8px; /* Extra padding for custom arrow */
    outline: none;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='rgba(255,255,255,0.5)' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
}

/* Standardizing the appearance of options is hard across browsers, but base styling helps */
.ui-select option {
    background-color: #1e1e1e;
    color: #fff;
}

.ui-select:hover {
    border-color: var(--ui-input-border-hover);
    background: rgba(255, 255, 255, 0.05);
}

.ui-select:focus {
    border-color: var(--ui-accent-color);
    box-shadow: 0 0 0 2px rgba(56, 145, 255, 0.2);
}

.ui-select:focus-visible,
.ui-slider:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* ═══════════════════════════════════════════════════════════════
   FIELD (input[type="number" | "text"])
   Sibling primitive to .ui-select; same recessed surface so number
   spinners look like they belong with the dropdowns next to them.
   ═══════════════════════════════════════════════════════════════ */

.ui-field {
    height: 28px;
    background: var(--ui-input-bg);
    border: 1px solid var(--ui-input-border);
    border-radius: var(--radius-md);
    color: var(--ui-input-text);
    font-size: var(--font-md);
    padding: 0 var(--space-2);
    outline: none;
    cursor: text;
    font-family: inherit;
    font-variant-numeric: tabular-nums;
    transition: border-color var(--dur-base) var(--ease-out),
                background var(--dur-base) var(--ease-out),
                box-shadow var(--dur-base) var(--ease-out);
}

.ui-field:hover {
    border-color: var(--ui-input-border-hover);
    background: rgba(255, 255, 255, 0.05);
}

.ui-field:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-color: var(--accent);
}

/* Spinners on number inputs feel oversized in toolbar contexts; suppress
   them so the field reads as a tight value control like the dropdowns. */
.ui-field[type="number"]::-webkit-inner-spin-button,
.ui-field[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.ui-field[type="number"] {
    -moz-appearance: textfield;
}

.ui-field:disabled,
.ui-field.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}