/**
 * MIDI editor toolbar — visual rules.
 * Relocated from main.css so the editor's chrome lives next to its
 * other component styles. Placement, surface sizing, canvas layers,
 * and playhead still live in EditorViewDomMethods.js as inline cssText.
 */

.midi-editor-overlay {
    background: var(--glass-surface);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.3);
}

.midi-editor-toolbar {
    display: flex;
    gap: var(--space-2);
    row-gap: 6px;
    align-items: center;
    padding: 6px var(--space-2);
    border-bottom: 1px solid #2b2f3a;
    flex-wrap: wrap;
    --range-width: 120px;
}

.midi-editor-toolbar-spacer {
    flex: 1;
}

.midi-editor-toolbar-divider {
    width: 1px;
    height: 20px;
    background: var(--border-default);
    margin: 0 2px;
    flex-shrink: 0;
}

/* Track label — non-interactive identifier for the open track. */
.midi-editor-track {
    margin-left: var(--space-2);
    color: var(--text-1);
    opacity: 0.8;
    font-size: var(--font-md);
    white-space: nowrap;
}

/* Inline label wrapping a control (e.g. "Snap [select]", "Zoom X [slider]"). */
.midi-editor-field {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-2);
    font-size: var(--font-md);
    white-space: nowrap;
}

/* Keyboard-shortcut hint sub-toolbar text. */
.midi-editor-toolbar .shortcut-hint {
    color: var(--text-3);
    font-size: var(--font-sm);
    white-space: nowrap;
}

/* Button-height variant for the editor toolbar — denser than the topbar. */
.ui-button.midi-editor-button {
    height: var(--control-h-md);
    min-height: var(--control-h-md);
    width: auto;
    padding: 0 var(--space-3);
    font-size: var(--font-md);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    white-space: nowrap;
    flex-shrink: 0;
}

.ui-button.midi-editor-button:hover {
    border-color: rgba(255, 255, 255, 0.14);
}

.ui-button.midi-editor-button.active,
.ui-button.midi-editor-button[aria-pressed="true"] {
    background: var(--accent-bg-soft);
    border-color: rgba(56, 145, 255, 0.38);
    color: #6eb0ff;
}

.ui-button.midi-editor-button:active {
    border-color: rgba(255, 255, 255, 0.18);
}