/*
 * 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.
 */

@layer components {
    .sheet-music-controller {
        --sheet-measures-per-system: 4;
        --sheet-note-body: color-mix(in oklab, var(--color-accent) 72%, var(--color-primary));
        --sheet-note-accent: color-mix(in oklab, var(--color-accent) 58%, var(--color-surface));
        --sheet-line: color-mix(in oklab, var(--color-primary) 30%, var(--color-text));
        --sheet-text-soft: color-mix(in oklab, var(--color-text) 72%, var(--color-surface));
        --sheet-bg: color-mix(in oklab, var(--color-surface) 90%, #000);

        background: var(--sheet-bg);
        border: 1px solid color-mix(in oklab, var(--color-primary) 30%, transparent);
        border-radius: var(--radius-m);
        box-shadow: var(--shadow-m);
        color: var(--color-text);
        padding: var(--space-l);

        & .sheet-music-controller__toolbar {
            display: flex;
            justify-content: flex-end;
        }

        & .sheet-music-controller__toggle {
            border-color: color-mix(in oklab, var(--color-primary) 48%, transparent);
            font-size: 0.9rem;
            padding-inline: var(--space-m);
            padding-block: var(--space-xs);
        }

        & .sheet-music-controller__systems {
            container-type: inline-size;
            display: grid;
            gap: var(--space-xl);
            justify-items: start;
        }

        & .sheet-music-controller__system {
            display: flex;
            flex-wrap: nowrap;
            isolation: isolate;
            max-width: calc(var(--sheet-measure-count, var(--sheet-measures-per-system)) / var(--sheet-measures-per-system) * 100cqi);
            min-height: 4.5rem;
            position: relative;

            &::before {
                background: var(--sheet-line);
                content: '';
                height: 1px;
                inset-inline: 0;
                inset-block-start: 70%;
                position: absolute;
                z-index: 0;
            }
        }

        & .sheet-music-controller__measure {
            flex: 0 0 calc(100cqi / var(--sheet-measures-per-system));
            min-height: 5.5rem;
            padding-inline: clamp(0.45rem, 1vw, 0.75rem);
            position: relative;
            z-index: 1;

            border-inline-end: none;

            &:first-child::before {
                content: "";
                position: absolute;
                left: 0;
                top: 70%;
                transform: translateY(-50%);

                width: 1px;
                height: 2.5rem;
                background-color: var(--sheet-line);
                opacity: 0.6;
            }

            &::after {
                content: "";
                position: absolute;
                right: 0;
                top: 70%;
                transform: translateY(-50%);

                width: 1px;
                height: 2.5rem;
                background-color: var(--sheet-line);

            }
        }

        & .sheet-music-controller__measure--first {
        }

        & .sheet-music-controller__measure--last {
            border-inline-end: none;
        }

        & .sheet-music-controller__bar-number {
            color: var(--sheet-text-soft);
            font-size: 0.75rem;
            inset-inline-start: -5px;
            position: absolute;
            top: 22%;
        }

        & .sheet-music-controller__meta {
            align-items: baseline;
            color: var(--sheet-text-soft);
            display: flex;
            gap: var(--space-s);
            inset-inline-start: var(--space-s);
            position: absolute;
            top: calc(-1 * var(--space-xl));
            white-space: nowrap;
        }

        & .sheet-music-controller__meta-time {
            color: var(--sheet-note-body);
            font-family: var(--font-serif), serif;
            font-size: 1.05rem;
            font-weight: 700;
        }

        & .sheet-music-controller__meta-tempo {
            color: var(--sheet-text-soft);
            font-size: 0.85rem;
        }

        & .sheet-music-controller__note {
            height: 4px;
            inset-block-start: 58%;
            position: absolute;
            transform: translateX(-50%) translateY(-50%);
            width: 16px;
            top: 70%;
        }

        & .sheet-music-controller__note-label {
            color: var(--sheet-note-body);
            font-size: 0.84rem;
            font-weight: 600;
            line-height: 1;
            inset-block-end: calc(100% + 2rem);
            inset-inline-start: -30%;
            position: absolute;
            text-align: center;
            text-shadow: 0 0 10px
            color-mix(in oklab, var(--color-primary) 24%, transparent);
            white-space: nowrap;
        }

        & .sheet-music-controller__slash {
            width: 24px;
            height: 11px;
            border-radius: 1px;
            background: transparent;
            border: 2px solid var(--sheet-note-accent);
            position: relative;
            transform-origin: center;
            transform: rotate(-51deg) skewX(40deg);
            box-shadow: none !important;
            margin-top: -1px;
            margin-left: -12px;
            border-top-width: 3px;
            border-bottom-width: 3px;
        }

        & .sheet-music-controller__stem {
            background: var(--sheet-note-body);
            height: 44px;
            inset-inline-start: 13px;
            position: absolute;
            top: -49px;
            width: 1px;
        }

        & .sheet-music-controller__beam {
            background: var(--sheet-note-body);
            height: 4px;
            position: absolute;
            top: calc(70% - 51px);
            z-index: 1;
        }

        & .sheet-music-controller__flag {
            border-inline-end: 1px solid var(--sheet-note-body);
            border-radius: 0 0.45rem 0 0;
            border-top: 1px solid var(--sheet-note-body);
            height: 0.58rem;
            inset-inline-start: 13px;
            position: absolute;
            top: -26px;
            width: 0.52rem;
        }

        & .sheet-music-controller__playhead {
            background: linear-gradient(
                to bottom,
                transparent 0%,
                color-mix(in oklab, var(--color-accent) 70%, transparent) 20%,
                color-mix(in oklab, var(--color-accent) 80%, transparent) 80%,
                transparent 100%
            );
            border-radius: 2px;
            inset-block-start: 20%;
            inset-block-end: 10%;
            left: var(--playhead, 0%);
            opacity: 0;
            pointer-events: none;
            position: absolute;
            transform: translateX(-50%);
            transition: left 120ms linear, opacity 180ms ease-out;
            width: 2px;
            z-index: 2;
        }

        & .sheet-music-controller__system[data-active] .sheet-music-controller__playhead {
            opacity: 1;
            box-shadow: 0 0 10px color-mix(in oklab, var(--color-accent) 45%, transparent);
        }

        & .sheet-music-controller__note[data-state='playing'] {
            animation: sheet-music-controller-pulse 600ms ease-in-out infinite alternate;

            & .sheet-music-controller__note-label {
                color: color-mix(in oklab, var(--color-accent) 90%, var(--color-text));
                text-shadow: 0 0 12px color-mix(in oklab, var(--color-accent) 55%, transparent);
            }

            & .sheet-music-controller__slash {
                border-color: color-mix(in oklab, var(--color-accent) 90%, var(--color-primary));
                box-shadow: 0 0 10px color-mix(in oklab, var(--color-accent) 50%, transparent) !important;
            }
        }

        & .sheet-music-controller__note[data-state='played'] {
            opacity: 0.45;
            filter: saturate(0.7);

            & .sheet-music-controller__note-label {
                color: var(--sheet-text-soft);
            }
        }

        & .sheet-music-controller__status {
            color: var(--sheet-text-soft);
            font-size: 0.92rem;
            margin: 0;
        }

        &[data-label-mode='note'] {
            & .sheet-music-controller__note-label {
                color: color-mix(in oklab, var(--color-accent) 58%, var(--color-primary));
            }
        }

        &[data-variant='dark'] {
            --sheet-bg: color-mix(in oklab, var(--color-surface) 93%, #000);
            --sheet-line: color-mix(in oklab, var(--color-primary) 60%, var(--color-text));
            --sheet-text-soft: color-mix(in oklab, var(--color-text) 83%, var(--color-surface));
            --sheet-note-body: color-mix(in oklab, var(--color-accent) 85%, var(--color-primary));
            --sheet-note-accent: color-mix(in oklab, var(--color-accent) 60%, var(--color-surface));

            & .sheet-music-controller__playhead {
                background: linear-gradient(
                    to bottom,
                    transparent 0%,
                    color-mix(in oklab, var(--color-accent) 85%, transparent) 20%,
                    color-mix(in oklab, var(--color-accent) 95%, transparent) 80%,
                    transparent 100%
                );
            }
        }
    }

    @keyframes sheet-music-controller-pulse {
        from {
            filter: brightness(1);
        }
        to {
            filter: brightness(1.35);
        }
    }
}