@layer components {
    :root {
        --mosaic-board-line: var(--opaque-separator);
        --mosaic-board-line-strong: var(--secondary-label);
        --mosaic-board-cell: var(--secondary-system-grouped-background);
        --mosaic-board-filled: var(--label);
        --mosaic-board-mark: var(--secondary-label);
        --mosaic-board-clue: var(--label);
        --mosaic-board-clue-done: var(--tertiary-label);
        --mosaic-board-caption: var(--secondary-label);
    }

    .mosaic-board {
        display: grid;
        gap: 0.75rem;
        inline-size: min(100%, 34rem);
        user-select: none;
    }

    .mosaic-board__grid {
        display: grid;
        grid-template-columns: auto repeat(5, minmax(0, 1fr));

        &.mosaic-board__grid--size-10 {
            grid-template-columns: auto repeat(10, minmax(0, 1fr));
        }

        &.mosaic-board__grid--size-15 {
            grid-template-columns: auto repeat(15, minmax(0, 1fr));
        }
    }

    .mosaic-board__corner {
        border-block-end: 0.125rem solid var(--mosaic-board-line-strong);
        border-inline-end: 0.125rem solid var(--mosaic-board-line-strong);
    }

    .mosaic-board__col-clue {
        align-items: center;
        border-block-end: 0.125rem solid var(--mosaic-board-line-strong);
        color: var(--mosaic-board-clue);
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding-block-end: 0.25rem;

        &.mosaic-board__col-clue--edge {
            border-inline-end: 0.0625rem solid var(--mosaic-board-line-strong);
        }

        &.mosaic-board__col-clue--done {
            color: var(--mosaic-board-clue-done);
        }
    }

    .mosaic-board__row-clue {
        align-items: center;
        border-inline-end: 0.125rem solid var(--mosaic-board-line-strong);
        color: var(--mosaic-board-clue);
        display: flex;
        gap: 0.375rem;
        justify-content: flex-end;
        padding-inline: 0.25rem 0.375rem;

        &.mosaic-board__row-clue--edge {
            border-block-end: 0.0625rem solid var(--mosaic-board-line-strong);
        }

        &.mosaic-board__row-clue--done {
            color: var(--mosaic-board-clue-done);
        }
    }

    .mosaic-board__number {
        font-size: 0.875rem;
        font-variant-numeric: tabular-nums;
        font-weight: 600;
        line-height: 1.25rem;

        &.mosaic-board__number--compact {
            font-size: 0.6875rem;
            letter-spacing: -0.03rem;
            line-height: 1rem;
        }
    }

    .mosaic-board__cell {
        appearance: none;
        aspect-ratio: 1;
        background-color: var(--mosaic-board-cell);
        border: none;
        border-block-end: 0.0625rem solid var(--mosaic-board-line);
        border-inline-end: 0.0625rem solid var(--mosaic-board-line);
        border-radius: 0;
        display: grid;
        margin: 0;
        min-inline-size: 0;
        padding: 0;
        place-items: center;
        -webkit-tap-highlight-color: transparent;

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

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

        &.mosaic-board__cell--filled {
            background-color: var(--mosaic-board-filled);
        }

        &.mosaic-board__cell--finished {
            border-color: transparent;
        }

        &.mosaic-board__cell--marked::after {
            aspect-ratio: 1;
            background-image:
                linear-gradient(
                    45deg,
                    transparent calc(50% - 0.0625rem),
                    var(--mosaic-board-mark) calc(50% - 0.0625rem),
                    var(--mosaic-board-mark) calc(50% + 0.0625rem),
                    transparent calc(50% + 0.0625rem)
                ),
                linear-gradient(
                    -45deg,
                    transparent calc(50% - 0.0625rem),
                    var(--mosaic-board-mark) calc(50% - 0.0625rem),
                    var(--mosaic-board-mark) calc(50% + 0.0625rem),
                    transparent calc(50% + 0.0625rem)
                );
            content: "";
            inline-size: 45%;
        }

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

    .mosaic-board__caption {
        color: var(--mosaic-board-caption);
        margin: 0;
        text-align: center;
    }
}