@layer components {
    div.color-choices-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: start;
        max-width: 100%;
        row-gap: var(--space-s);
        margin-bottom: var(--space-m);
    }

    div.color-chooser {
        display: flex;
        align-items: stretch;
        flex-grow: 1 1 0;
        width: 100%;
    }

    .color-options {
        display: flex;
        flex-direction: column;
        align-items: start;
        justify-content: start;
        /* flex: 1 1 0; */
        row-gap: 0;

        & input.color-option {
            display: block;
            height: 2rem;
            width: 2rem;
            aspect-ratio: 1 / 1;
            border: solid var(--size--border) var(--color--border);
            border-bottom: none;
            margin: 0;
            flex-grow: 0;
            padding: 0;
            box-sizing: content-box;
            position: relative;

            &:last-child {
                border-bottom: solid var(--size--border) var(--color--border);
            }

            border-radius: 0;

            &::before {
                border: none;
            }

            &:checked::before {
                display: block;
                mask-image: var(--icon--checkmark);
                mask-repeat: no-repeat;
                mask-position: center;
                background-color: var(--color--text--primary);
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
            }
        }

        &.dark input.color-option:checked::before {
            background-color: var(--color--brand--white);
        }
    }

    @media screen and (min-width: 600px) {
        div.color-choices-container {
            display: grid;
            grid-template-columns: subgrid;
            justify-content: start;
            grid-column: 1 / -1;
        }

        .color-options {
            & input.color-option {
                height: 2.5rem;
                width: 2.5rem;
            }
        }


        div.color-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
        }
    }
}