@layer components {
    :root {
        --beacons-board-line: var(--opaque-separator);
        --beacons-board-edge: var(--label);
        --beacons-board-ink: light-dark(oklch(0.2 0.02 60 / 0.16), oklch(0.98 0.01 80 / 0.16));
        --beacons-board-mark: var(--secondary-label);
        --beacons-board-beacon: var(--tint);
        --beacons-board-lamp: light-dark(oklch(0.98 0.03 90), oklch(0.97 0.06 92));
        --beacons-board-ring: light-dark(oklch(1 0 0 / 0.9), oklch(0.15 0.01 60 / 0.9));
        --beacons-board-broken: light-dark(oklch(0.55 0.2 27), oklch(0.72 0.17 27));
        --beacons-board-focus: var(--tint);
        --beacons-board-region-0: light-dark(oklch(0.95 0.04 90), oklch(0.34 0.05 90));
        --beacons-board-region-1: light-dark(oklch(0.8 0.08 30), oklch(0.46 0.08 30));
        --beacons-board-region-2: light-dark(oklch(0.89 0.05 235), oklch(0.29 0.06 235));
        --beacons-board-region-3: light-dark(oklch(0.74 0.08 300), oklch(0.5 0.08 300));
        --beacons-board-region-4: light-dark(oklch(0.87 0.06 190), oklch(0.39 0.06 190));
        --beacons-board-region-5: light-dark(oklch(0.79 0.08 70), oklch(0.43 0.07 70));
        --beacons-board-region-6: light-dark(oklch(0.92 0.04 350), oklch(0.27 0.05 350));
        --beacons-board-region-7: light-dark(oklch(0.7 0.07 255), oklch(0.53 0.07 255));
        --beacons-board-region-8: light-dark(oklch(0.84 0.07 130), oklch(0.37 0.06 130));
        --beacons-board-region-9: light-dark(oklch(0.72 0.06 15), oklch(0.31 0.06 15));
    }

    .beacons-board {
        border: 0.125rem solid var(--beacons-board-edge);
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        inline-size: min(100%, 30rem);
        user-select: none;

        &.beacons-board--size-8 {
            grid-template-columns: repeat(8, 1fr);
        }

        &.beacons-board--size-10 {
            grid-template-columns: repeat(10, 1fr);
        }
    }

    .beacons-board__cell {
        --beacons-board-pattern: none;

        aspect-ratio: 1;
        background-color: var(--beacons-board-region);
        background-image: var(--beacons-board-pattern);
        border: 0.03125rem solid var(--beacons-board-line);
        display: grid;
        margin: 0;
        min-inline-size: 0;
        place-items: center;

        &.beacons-board__cell--region-0 {
            --beacons-board-region: var(--beacons-board-region-0);
        }

        &.beacons-board__cell--region-1 {
            --beacons-board-region: var(--beacons-board-region-1);
            --beacons-board-pattern: repeating-linear-gradient(
                45deg,
                var(--beacons-board-ink) 0 0.0625rem,
                transparent 0.0625rem 0.4rem
            );
        }

        &.beacons-board__cell--region-2 {
            --beacons-board-region: var(--beacons-board-region-2);
            --beacons-board-pattern: radial-gradient(
                circle at center,
                var(--beacons-board-ink) 0 0.0625rem,
                transparent 0.09rem
            );

            background-size: 0.5rem 0.5rem;
        }

        &.beacons-board__cell--region-3 {
            --beacons-board-region: var(--beacons-board-region-3);
            --beacons-board-pattern: repeating-linear-gradient(
                0deg,
                var(--beacons-board-ink) 0 0.0625rem,
                transparent 0.0625rem 0.4rem
            );
        }

        &.beacons-board__cell--region-4 {
            --beacons-board-region: var(--beacons-board-region-4);
            --beacons-board-pattern: repeating-linear-gradient(
                135deg,
                var(--beacons-board-ink) 0 0.0625rem,
                transparent 0.0625rem 0.4rem
            );
        }

        &.beacons-board__cell--region-5 {
            --beacons-board-region: var(--beacons-board-region-5);
            --beacons-board-pattern: repeating-linear-gradient(
                90deg,
                var(--beacons-board-ink) 0 0.0625rem,
                transparent 0.0625rem 0.4rem
            );
        }

        &.beacons-board__cell--region-6 {
            --beacons-board-region: var(--beacons-board-region-6);
            --beacons-board-pattern: repeating-linear-gradient(
                    45deg,
                    var(--beacons-board-ink) 0 0.0625rem,
                    transparent 0.0625rem 0.5rem
                ),
                repeating-linear-gradient(
                    135deg,
                    var(--beacons-board-ink) 0 0.0625rem,
                    transparent 0.0625rem 0.5rem
                );
        }

        &.beacons-board__cell--region-7 {
            --beacons-board-region: var(--beacons-board-region-7);
            --beacons-board-pattern: repeating-linear-gradient(
                    0deg,
                    var(--beacons-board-ink) 0 0.0625rem,
                    transparent 0.0625rem 0.5rem
                ),
                repeating-linear-gradient(
                    90deg,
                    var(--beacons-board-ink) 0 0.0625rem,
                    transparent 0.0625rem 0.5rem
                );
        }

        &.beacons-board__cell--region-8 {
            --beacons-board-region: var(--beacons-board-region-8);
            --beacons-board-pattern: radial-gradient(
                circle at center,
                var(--beacons-board-ink) 0 0.125rem,
                transparent 0.15rem
            );

            background-size: 0.875rem 0.875rem;
        }

        &.beacons-board__cell--region-9 {
            --beacons-board-region: var(--beacons-board-region-9);
            --beacons-board-pattern: repeating-linear-gradient(
                45deg,
                var(--beacons-board-ink) 0 0.1875rem,
                transparent 0.1875rem 0.625rem
            );
        }

        &.beacons-board__cell--edge-top {
            border-block-start: 0.125rem solid var(--beacons-board-edge);
        }

        &.beacons-board__cell--edge-right {
            border-inline-end: 0.125rem solid var(--beacons-board-edge);
        }

        &.beacons-board__cell--edge-bottom {
            border-block-end: 0.125rem solid var(--beacons-board-edge);
        }

        &.beacons-board__cell--edge-left {
            border-inline-start: 0.125rem solid var(--beacons-board-edge);
        }

        &.beacons-board__cell--broken {
            outline: 0.1875rem dashed var(--beacons-board-broken);
            outline-offset: -0.25rem;
        }
    }

    .beacons-board__tap {
        appearance: none;
        background: none;
        block-size: 100%;
        border: none;
        border-radius: 0;
        color: inherit;
        cursor: pointer;
        display: grid;
        inline-size: 100%;
        margin: 0;
        padding: 0;
        place-items: center;
        -webkit-tap-highlight-color: transparent;

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

    .beacons-board__mark {
        aspect-ratio: 1;
        background-color: var(--beacons-board-mark);
        border-radius: 50%;
        inline-size: 22%;
    }

    .beacons-board__beacon {
        aspect-ratio: 1;
        background: radial-gradient(
            circle,
            var(--beacons-board-lamp) 0 28%,
            var(--beacons-board-beacon) 32%
        );
        border-radius: 50%;
        box-shadow: 0 0 0 0.125rem var(--beacons-board-ring);
        inline-size: 64%;
    }
}