@layer components {
    :root {
        --mosaic-pad-status: var(--secondary-label);
        --mosaic-pad-right: var(--tint);
        --mosaic-pad-wrong: light-dark(oklch(0.55 0.2 27), oklch(0.72 0.17 27));
    }

    .mosaic-pad {
        display: grid;
        gap: 0.5rem;
    }

    .mosaic-pad__status {
        color: var(--mosaic-pad-status);
        font-size: 0.9375rem;
        margin: 0;
        min-block-size: 2.5rem;
        text-align: center;

        &[data-mosaic-check="right"] {
            color: var(--mosaic-pad-right);
            font-weight: 600;
        }

        &[data-mosaic-check="wrong"] {
            color: var(--mosaic-pad-wrong);
            font-weight: 600;
        }
    }

    .mosaic-pad__check {
        display: grid;
    }

    .mosaic-pad__check-button {
        inline-size: 100%;
        min-block-size: 3.25rem;
    }
}