@layer components {
    :root {
        --tangled-wires-board-tile: color-mix(
            in oklch,
            var(--label) 5%,
            var(--secondary-system-grouped-background)
        );
        --tangled-wires-board-tile-pressed: color-mix(
            in oklch,
            var(--tint) 14%,
            var(--secondary-system-grouped-background)
        );
        --tangled-wires-board-cable: var(--tertiary-label);
        --tangled-wires-board-lit: var(--tint);
        --tangled-wires-board-lamp: var(--system-background);
        --tangled-wires-board-pin: var(--system-background);
        --tangled-wires-board-lamp-lit: light-dark(oklch(0.86 0.13 80), oklch(0.84 0.14 80));
        --tangled-wires-board-glow: color-mix(
            in oklch,
            var(--tint) 10%,
            var(--secondary-system-grouped-background)
        );
    }

    .tangled-wires-board {
        inline-size: min(100%, 22rem);
        user-select: none;

        &.tangled-wires-board--size-7 {
            inline-size: min(100%, 26rem);
        }

        &.tangled-wires-board--size-9 {
            inline-size: min(100%, 30rem);
        }
    }

    .tangled-wires-board__grid {
        display: grid;
        gap: 0.125rem;
        grid-template-columns: repeat(5, 1fr);

        .tangled-wires-board--size-7 & {
            grid-template-columns: repeat(7, 1fr);
        }

        .tangled-wires-board--size-9 & {
            grid-template-columns: repeat(9, 1fr);
        }
    }

    .tangled-wires-board__tile {
        aspect-ratio: 1;
        background-color: var(--tangled-wires-board-tile);
        border: none;
        border-radius: 0.375rem;
        color: var(--tangled-wires-board-cable);
        display: grid;
        min-inline-size: 0;
        padding: 0;
        place-items: stretch;
        -webkit-tap-highlight-color: transparent;

        &:is(button) {
            cursor: pointer;
        }

        &:is(button):active {
            background-color: var(--tangled-wires-board-tile-pressed);
        }

        &.tangled-wires-board__tile--lit {
            background-color: var(--tangled-wires-board-glow);
            color: var(--tangled-wires-board-lit);
        }

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

    .tangled-wires-board__drawing {
        block-size: 100%;
        display: block;
        inline-size: 100%;
    }

    .tangled-wires-board__cable {
        fill: none;
        stroke: currentcolor;
        stroke-linecap: square;
        stroke-width: 16;
    }

    .tangled-wires-board__knot {
        fill: currentcolor;
    }

    .tangled-wires-board__lamp {
        fill: var(--tangled-wires-board-lamp);
        stroke: currentcolor;
        stroke-width: 8;

        .tangled-wires-board__tile--lit & {
            fill: var(--tangled-wires-board-lamp-lit);
        }
    }

    .tangled-wires-board__socket {
        fill: currentcolor;
    }

    .tangled-wires-board__pin {
        fill: var(--tangled-wires-board-pin);
    }
}