@layer components {
    :root {
        --traffic-jam-board-asphalt: color-mix(
            in oklab,
            var(--label) 9%,
            var(--secondary-system-background)
        );
        --traffic-jam-board-kerb: color-mix(
            in oklab,
            var(--label) 24%,
            var(--system-background)
        );
        --traffic-jam-board-well: light-dark(
            oklch(22% 0.03 60deg / 16%),
            oklch(0% 0 0deg / 45%)
        );
        --traffic-jam-board-line: light-dark(
            oklch(100% 0 0deg / 60%),
            oklch(100% 0 0deg / 11%)
        );
        --traffic-jam-board-lane: color-mix(
            in oklab,
            var(--tint) 10%,
            transparent
        );
        --traffic-jam-board-exit-mark: var(--tint);
        --traffic-jam-board-exit-glow: color-mix(
            in oklab,
            var(--tint) 35%,
            transparent
        );
        --traffic-jam-board-target: var(--tint);
        --traffic-jam-board-target-fill: color-mix(
            in oklab,
            var(--tint) 18%,
            transparent
        );
        --traffic-jam-board-focus: var(--tint);
        --traffic-jam-board-glow: color-mix(
            in oklab,
            var(--tint) 85%,
            transparent
        );
        --traffic-jam-board-shadow: light-dark(
            oklch(22% 0.03 60deg / 34%),
            oklch(0% 0 0deg / 72%)
        );
        --traffic-jam-board-shadow-lifted: light-dark(
            oklch(22% 0.03 60deg / 30%),
            oklch(0% 0 0deg / 70%)
        );
        --traffic-jam-board-glass: light-dark(
            oklch(34% 0.035 245deg),
            oklch(25% 0.03 245deg)
        );
        --traffic-jam-board-glint: oklch(100% 0 0deg / 50%);
        --traffic-jam-board-sheen: oklch(100% 0 0deg / 24%);
        --traffic-jam-board-tyre: oklch(21% 0.01 260deg);
        --traffic-jam-board-headlight: oklch(97% 0.045 95deg);
        --traffic-jam-board-taillight: oklch(50% 0.19 25deg);
        --traffic-jam-board-stripe: oklch(98% 0.008 90deg);
        --traffic-jam-board-box: light-dark(
            oklch(96% 0.006 90deg),
            oklch(84% 0.006 90deg)
        );
        --traffic-jam-board-rib: oklch(30% 0.01 260deg / 16%);
        --traffic-jam-board-dark: oklch(18% 0.02 260deg);
        --traffic-jam-board-light: oklch(100% 0 0deg);
        --traffic-jam-board-ink-dark: oklch(25% 0.02 260deg);
        --traffic-jam-board-ink-light: oklch(99% 0.004 90deg);
        --traffic-jam-board-red: light-dark(
            oklch(57% 0.21 27deg),
            oklch(56% 0.2 27deg)
        );
        --traffic-jam-board-paint-0: light-dark(
            oklch(83% 0.15 88deg),
            oklch(74% 0.13 88deg)
        );
        --traffic-jam-board-paint-1: light-dark(
            oklch(56% 0.13 252deg),
            oklch(50% 0.12 252deg)
        );
        --traffic-jam-board-paint-2: light-dark(
            oklch(74% 0.09 150deg),
            oklch(64% 0.08 150deg)
        );
        --traffic-jam-board-paint-3: light-dark(
            oklch(95% 0.012 90deg),
            oklch(84% 0.01 90deg)
        );
        --traffic-jam-board-paint-4: light-dark(
            oklch(70% 0.1 296deg),
            oklch(60% 0.1 296deg)
        );
        --traffic-jam-board-paint-5: light-dark(
            oklch(44% 0.015 260deg),
            oklch(42% 0.012 260deg)
        );
        --traffic-jam-board-paint-6: light-dark(
            oklch(64% 0.1 200deg),
            oklch(56% 0.09 200deg)
        );
        --traffic-jam-board-paint-7: light-dark(
            oklch(82% 0.1 66deg),
            oklch(72% 0.09 66deg)
        );
        --traffic-jam-board-paint-8: light-dark(
            oklch(40% 0.085 262deg),
            oklch(38% 0.07 262deg)
        );
        --traffic-jam-board-paint-9: light-dark(
            oklch(83% 0.07 228deg),
            oklch(72% 0.07 228deg)
        );
        --traffic-jam-board-paint-10: light-dark(
            oklch(48% 0.1 332deg),
            oklch(44% 0.09 332deg)
        );
        --traffic-jam-board-paint-11: light-dark(
            oklch(62% 0.085 128deg),
            oklch(54% 0.075 128deg)
        );
        --traffic-jam-board-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    .traffic-jam-board {
        --traffic-jam-board-kerb-size: 0.5rem;
        --traffic-jam-board-stub: 0.875rem;

        box-sizing: border-box;
        display: grid;
        inline-size: min(100%, 28rem);
        margin: 0;
        overflow-x: clip;
        padding-inline-end: var(--traffic-jam-board-stub);
        position: relative;
        -webkit-touch-callout: none;
        user-select: none;
        -webkit-user-select: none;

        &[data-pending] {
            cursor: progress;
        }
    }

    .traffic-jam-board__lot {
        aspect-ratio: 1;
        background-color: var(--traffic-jam-board-asphalt);
        border: var(--traffic-jam-board-kerb-size) solid
            var(--traffic-jam-board-kerb);
        border-radius: 1.125rem;
        box-shadow:
            inset 0 0.125rem 0.375rem var(--traffic-jam-board-well),
            0 0.0625rem 0.125rem var(--traffic-jam-board-well);
        box-sizing: border-box;
        display: grid;
        position: relative;
    }

    .traffic-jam-board__markings {
        block-size: 100%;
        display: block;
        grid-area: 1 / 1;
        inline-size: 100%;
    }

    .traffic-jam-board__lane {
        fill: var(--traffic-jam-board-lane);
    }

    .traffic-jam-board__bays {
        fill: none;
        stroke: var(--traffic-jam-board-line);
        stroke-width: 0.0625rem;
        vector-effect: non-scaling-stroke;
    }

    .traffic-jam-board__arrow {
        fill: var(--traffic-jam-board-line);
    }

    .traffic-jam-board__exit {
        background-color: var(--traffic-jam-board-asphalt);
        block-size: calc(100% / 6);
        border-end-end-radius: 0.5rem;
        border-start-end-radius: 0.5rem;
        box-sizing: border-box;
        display: grid;
        inline-size: calc(
            var(--traffic-jam-board-kerb-size) + var(--traffic-jam-board-stub)
        );
        inset-block-start: calc(100% / 3);
        inset-inline-start: 100%;
        padding-inline-start: var(--traffic-jam-board-kerb-size);
        place-items: center;
        position: absolute;

        &::after {
            block-size: 0.5rem;
            border-block-start: 0.1875rem solid
                var(--traffic-jam-board-exit-mark);
            border-inline-end: 0.1875rem solid
                var(--traffic-jam-board-exit-mark);
            border-start-end-radius: 0.125rem;
            box-sizing: border-box;
            content: "";
            inline-size: 0.5rem;
            margin-inline-end: 0.25rem;
            rotate: 45deg;
        }

        &.traffic-jam-board__exit--open {
            animation: traffic-jam-board-open 0.6s ease-out 0.55s both;

            &::after {
                animation: traffic-jam-board-beckon 0.3s ease-in-out 0.55s 2;
            }
        }
    }

    .traffic-jam-board__cells,
    .traffic-jam-board__cars {
        display: grid;
        grid-area: 1 / 1;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        grid-template-rows: repeat(6, minmax(0, 1fr));
        min-block-size: 0;
        min-inline-size: 0;
    }

    .traffic-jam-board__cars {
        pointer-events: none;
    }

    .traffic-jam-board__cell {
        appearance: none;
        background: none;
        border: 0;
        border-radius: 0.75rem;
        color: inherit;
        display: grid;
        font: inherit;
        margin: 0;
        min-block-size: 0;
        min-inline-size: 0;
        padding: 0;
        place-items: center;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
        transition: scale 0.12s var(--traffic-jam-board-ease);

        &.traffic-jam-board__cell--target {
            cursor: pointer;
        }

        &.traffic-jam-board__cell--target:active {
            scale: 0.88;
        }

        &:focus-visible {
            outline: 0.1875rem solid var(--traffic-jam-board-focus);
            outline-offset: -0.25rem;
        }
    }

    .traffic-jam-board__chevron {
        inline-size: 62%;

        &.traffic-jam-board__chevron--down {
            rotate: 90deg;
        }

        &.traffic-jam-board__chevron--left {
            rotate: 180deg;
        }

        &.traffic-jam-board__chevron--up {
            rotate: -90deg;
        }
    }

    .traffic-jam-board__dot {
        fill: var(--traffic-jam-board-target-fill);
    }

    .traffic-jam-board__tick {
        fill: none;
        stroke: var(--traffic-jam-board-target);
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 0.15625rem;
    }

    .traffic-jam-board__car {
        --traffic-jam-board-paint: var(--traffic-jam-board-paint-0);
        --traffic-jam-board-ink: var(--traffic-jam-board-ink-dark);
        --traffic-jam-board-shade: color-mix(
            in oklab,
            var(--traffic-jam-board-paint) 74%,
            var(--traffic-jam-board-dark)
        );
        --traffic-jam-board-roof: color-mix(
            in oklab,
            var(--traffic-jam-board-paint) 80%,
            var(--traffic-jam-board-light)
        );
        --traffic-jam-board-cargo: color-mix(
            in oklab,
            var(--traffic-jam-board-paint) 12%,
            var(--traffic-jam-board-box)
        );
        --traffic-jam-board-cargo-shade: color-mix(
            in oklab,
            var(--traffic-jam-board-cargo) 80%,
            var(--traffic-jam-board-dark)
        );

        border-radius: 0.75rem;
        cursor: grab;
        display: block;
        min-block-size: 0;
        min-inline-size: 0;
        pointer-events: auto;
        position: relative;
        -webkit-tap-highlight-color: transparent;
        touch-action: pan-y;
        transition: translate 0.2s var(--traffic-jam-board-ease);

        &.traffic-jam-board__car--col-0 {
            grid-column-start: 1;
        }

        &.traffic-jam-board__car--col-1 {
            grid-column-start: 2;
        }

        &.traffic-jam-board__car--col-2 {
            grid-column-start: 3;
        }

        &.traffic-jam-board__car--col-3 {
            grid-column-start: 4;
        }

        &.traffic-jam-board__car--col-4 {
            grid-column-start: 5;
        }

        &.traffic-jam-board__car--col-5 {
            grid-column-start: 6;
        }

        &.traffic-jam-board__car--row-0 {
            grid-row-start: 1;
        }

        &.traffic-jam-board__car--row-1 {
            grid-row-start: 2;
        }

        &.traffic-jam-board__car--row-2 {
            grid-row-start: 3;
        }

        &.traffic-jam-board__car--row-3 {
            grid-row-start: 4;
        }

        &.traffic-jam-board__car--row-4 {
            grid-row-start: 5;
        }

        &.traffic-jam-board__car--row-5 {
            grid-row-start: 6;
        }

        &.traffic-jam-board__car--wide-2 {
            grid-column-end: span 2;
        }

        &.traffic-jam-board__car--wide-3 {
            grid-column-end: span 3;
        }

        &.traffic-jam-board__car--tall-2 {
            grid-row-end: span 2;
            touch-action: pan-x;
        }

        &.traffic-jam-board__car--tall-3 {
            grid-row-end: span 3;
            touch-action: pan-x;
        }

        &.traffic-jam-board__car--red {
            --traffic-jam-board-paint: var(--traffic-jam-board-red);
        }

        &.traffic-jam-board__car--paint-0 {
            --traffic-jam-board-paint: var(--traffic-jam-board-paint-0);
        }

        &.traffic-jam-board__car--paint-1 {
            --traffic-jam-board-paint: var(--traffic-jam-board-paint-1);
            --traffic-jam-board-ink: var(--traffic-jam-board-ink-light);
        }

        &.traffic-jam-board__car--paint-2 {
            --traffic-jam-board-paint: var(--traffic-jam-board-paint-2);
        }

        &.traffic-jam-board__car--paint-3 {
            --traffic-jam-board-paint: var(--traffic-jam-board-paint-3);
        }

        &.traffic-jam-board__car--paint-4 {
            --traffic-jam-board-paint: var(--traffic-jam-board-paint-4);
        }

        &.traffic-jam-board__car--paint-5 {
            --traffic-jam-board-paint: var(--traffic-jam-board-paint-5);
            --traffic-jam-board-ink: var(--traffic-jam-board-ink-light);
        }

        &.traffic-jam-board__car--paint-6 {
            --traffic-jam-board-paint: var(--traffic-jam-board-paint-6);
        }

        &.traffic-jam-board__car--paint-7 {
            --traffic-jam-board-paint: var(--traffic-jam-board-paint-7);
        }

        &.traffic-jam-board__car--paint-8 {
            --traffic-jam-board-paint: var(--traffic-jam-board-paint-8);
            --traffic-jam-board-ink: var(--traffic-jam-board-ink-light);
        }

        &.traffic-jam-board__car--paint-9 {
            --traffic-jam-board-paint: var(--traffic-jam-board-paint-9);
        }

        &.traffic-jam-board__car--paint-10 {
            --traffic-jam-board-paint: var(--traffic-jam-board-paint-10);
            --traffic-jam-board-ink: var(--traffic-jam-board-ink-light);
        }

        &.traffic-jam-board__car--paint-11 {
            --traffic-jam-board-paint: var(--traffic-jam-board-paint-11);
        }

        &.traffic-jam-board__car--selected,
        &[data-pressed],
        &[data-dragging],
        &[data-lifted] {
            z-index: 1;
        }

        &[data-dragging] {
            cursor: grabbing;
            transition: none;
        }

        &.traffic-jam-board__car--parked {
            cursor: default;
            pointer-events: none;
        }

        &.traffic-jam-board__car--leaving {
            animation: traffic-jam-board-leave 0.65s
                cubic-bezier(0.55, 0, 0.8, 0.3) 0.35s both;
        }

        &:focus-visible {
            outline: 0.1875rem solid var(--traffic-jam-board-focus);
            outline-offset: -0.0625rem;
            z-index: 1;
        }
    }

    .traffic-jam-board__vehicle {
        block-size: 100%;
        display: block;
        filter: drop-shadow(
            0 0.1875rem 0.1875rem var(--traffic-jam-board-shadow)
        );
        inline-size: 100%;
        overflow: visible;
        transition:
            scale 0.16s var(--traffic-jam-board-ease),
            filter 0.16s var(--traffic-jam-board-ease);

        &[data-lifted] {
            filter: drop-shadow(
                0 0.625rem 0.5rem var(--traffic-jam-board-shadow-lifted)
            );
            scale: 1.04;
        }

        &.traffic-jam-board__vehicle--selected {
            filter: drop-shadow(0 0 0.0625rem var(--traffic-jam-board-glow))
                drop-shadow(0 0 0.1875rem var(--traffic-jam-board-glow))
                drop-shadow(
                    0 0.625rem 0.5rem var(--traffic-jam-board-shadow-lifted)
                );
            scale: 1.04;
        }
    }

    .traffic-jam-board__tyre,
    .traffic-jam-board__chassis {
        fill: var(--traffic-jam-board-tyre);
    }

    .traffic-jam-board__mirror {
        fill: var(--traffic-jam-board-shade);
    }

    .traffic-jam-board__body {
        fill: var(--traffic-jam-board-paint);
        stroke: var(--traffic-jam-board-shade);
        stroke-width: 0.15625rem;
    }

    .traffic-jam-board__crease {
        fill: none;
        opacity: 0.45;
        stroke: var(--traffic-jam-board-shade);
        stroke-linecap: round;
        stroke-width: 0.125rem;
    }

    .traffic-jam-board__stripe {
        fill: var(--traffic-jam-board-stripe);
    }

    .traffic-jam-board__taillight {
        fill: var(--traffic-jam-board-taillight);
    }

    .traffic-jam-board__headlight {
        fill: var(--traffic-jam-board-headlight);
    }

    .traffic-jam-board__glass {
        fill: var(--traffic-jam-board-glass);
    }

    .traffic-jam-board__roof {
        fill: var(--traffic-jam-board-roof);
    }

    .traffic-jam-board__sheen {
        fill: var(--traffic-jam-board-sheen);
    }

    .traffic-jam-board__glint {
        fill: none;
        stroke: var(--traffic-jam-board-glint);
        stroke-linecap: round;
        stroke-width: 0.1875rem;
    }

    .traffic-jam-board__cargo {
        fill: var(--traffic-jam-board-cargo);
        stroke: var(--traffic-jam-board-cargo-shade);
        stroke-width: 0.15625rem;
    }

    .traffic-jam-board__rib {
        fill: none;
        stroke: var(--traffic-jam-board-rib);
        stroke-width: 0.1875rem;
    }

    .traffic-jam-board__letter {
        fill: var(--traffic-jam-board-ink);
        font-family: var(--font-sans);
        font-size: 1.875rem;
        font-weight: 800;

        &.traffic-jam-board__letter--cargo {
            fill: var(--traffic-jam-board-ink-dark);
        }
    }

    .traffic-jam-board__live {
        block-size: 0.0625rem;
        clip-path: inset(50%);
        inline-size: 0.0625rem;
        margin: -0.0625rem;
        overflow: hidden;
        position: absolute;
        white-space: nowrap;
    }

    @keyframes traffic-jam-board-leave {
        70% {
            opacity: 1;
        }

        to {
            opacity: 0;
            translate: 150% 0;
        }
    }

    @keyframes traffic-jam-board-open {
        40% {
            box-shadow: 0 0 0.75rem 0.25rem var(--traffic-jam-board-exit-glow);
        }
    }

    @keyframes traffic-jam-board-beckon {
        50% {
            translate: 0.1875rem 0;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .traffic-jam-board__car,
        .traffic-jam-board__cell,
        .traffic-jam-board__vehicle {
            transition: none;
        }

        .traffic-jam-board__car.traffic-jam-board__car--leaving,
        .traffic-jam-board__exit.traffic-jam-board__exit--open,
        .traffic-jam-board__exit.traffic-jam-board__exit--open::after {
            animation: none;
        }
    }
}