/*
 * This file is part of the UX SDC Bundle
 *
 * (c) Jozef Môstka <https://github.com/tito10047/ux-sdc>
 *
 * For the full copyright and license information, please view the LICENSE
 * file that was distributed with this source code.
 */

/* Styles for MidiPlayer component */
@layer components {
    .midi-player {
        background: var(--color-surface);
        border: 1px solid color-mix(in oklab, var(--color-primary) 25%, transparent);
        border-radius: var(--radius-m);
        box-shadow: var(--shadow-s);
        color: var(--color-text);
        padding: var(--space-m);

        & .midi-player__transport {
            align-items: center;
            display: flex;
            flex-wrap: wrap;
            gap: var(--space-xs);
        }

        & .midi-player__button {
            align-items: center;
            display: inline-flex;
            font-size: 1.1rem;
            justify-content: center;
            min-inline-size: 2.5rem;
            padding-inline: var(--space-s);

            &[disabled] {
                cursor: not-allowed;
                opacity: 0.45;
            }
        }

        & .midi-player__repeat {
            align-items: center;
            color: color-mix(in oklab, var(--color-text) 80%, var(--color-surface));
            display: inline-flex;
            gap: var(--space-xs);
            margin-inline-start: auto;
            user-select: none;
        }

        & .midi-player__progress {
            display: flex;
            flex-direction: column;
            gap: 0.25rem;
            margin-block-start: var(--space-s);
        }

        & .midi-player__progress-track {
            background: color-mix(in oklab, var(--color-primary) 12%, var(--color-surface));
            block-size: 0.4rem;
            border-radius: 999px;
            overflow: hidden;
            position: relative;
        }

        & .midi-player__progress-fill {
            background: linear-gradient(
                90deg,
                color-mix(in oklab, var(--color-primary) 70%, transparent),
                var(--color-primary)
            );
            block-size: 100%;
            border-radius: inherit;
            inline-size: var(--progress, 0%);
            transition: inline-size 120ms linear;
        }

        & .midi-player__progress-times {
            color: color-mix(in oklab, var(--color-text) 60%, var(--color-surface));
            display: flex;
            font-size: 0.8rem;
            font-variant-numeric: tabular-nums;
            justify-content: space-between;
        }

        &[data-state="idle"] .midi-player__progress-fill,
        &[data-state="error"] .midi-player__progress-fill {
            opacity: 0.4;
        }

        & .midi-player__status {
            color: color-mix(in oklab, var(--color-text) 70%, var(--color-surface));
            font-size: 0.9rem;
            margin-block-start: var(--space-xs);
            min-block-size: 1.25em;
        }

        /* State-driven icon/button visibility */
        &[data-state="playing"] .midi-player__button--play {
            display: none;
        }

        &:not([data-state="playing"]) .midi-player__button--pause {
            display: none;
        }

        &[data-state="error"] {
            border-color: color-mix(in oklab, var(--color-danger, crimson) 60%, transparent);
        }

        &[data-state="loading"] .midi-player__status {
            font-style: italic;
        }
    }
}