@layer components {
    .color-card {
        border: solid var(--size--border) var(--color--border);
        /* width: 13rem; */
        display: flex;
        flex-direction: column;
        justify-content: start;
        row-gap: 0;
        flex-grow: 1;

        & output {
            display: block;
            width: 100%;
            height: 7rem;
            border-bottom: solid var(--size--border) var(--color--border);
            flex-grow: 1;
        }

        & label {
            display: block;
            border-bottom: solid var(--size--border) var(--color--border);
            margin: var(--space-xs-new) var(--space-xs-new) 0 var(--space-xs-new);
            padding-bottom: var(--space-2xs);
            flex-grow: 0;

            font-family: var(--font--title--family--xxsmall);
            font-size: var(--font--title--size--xxsmall);
            font-weight: var(--font--title--weight--xxsmall);
            line-height: var(--font--title--line-height--xxsmall);
            letter-spacing: var(--font--title--letter-spacing--xxsmall);
            text-transform: var(--font--title--casing--xxsmall);
        }

        & span {
            display: block;
            padding: var(--space-xs-new);
            padding-top: var(--space-2xs);
            flex-grow: 0;

            &.color-name {
                font-family: var(--font--input--family--medium);
                font-size: var(--font--input--size--medium);
                font-weight: var(--font--input--weight--medium);
                line-height: var(--font--input--line-height--medium);
                letter-spacing: var(--font--input--letter-spacing--medium);
                text-transform: var(--font--input--casing--medium);
            }
        }

        & input {
            border: none;
            background: none;
            width: 100%;

            font-family: var(--font--input--family--medium);
            font-size: var(--font--input--size--medium);
            font-weight: var(--font--input--weight--medium);
            line-height: var(--font--input--line-height--medium);
            letter-spacing: var(--font--input--letter-spacing--medium);
            text-transform: var(--font--input--casing--medium);

            &:focus {
                outline: none;
            }
        }
    }

    div.primary-color {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: 1fr;
        align-items: stretch;
        margin-bottom: var(--space-m);

        & input {
            /* width: 100%; */

            background: none;
            border: none;

            &:focus {
                outline: none;
            }
        }

        & .color-card {
            height: auto;
            display: flex;
            flex-direction: column;
            width: 100%;
            margin-bottom: var(--space-m);

            & .color-example {
                /* height: auto; */
                flex-grow: 1;
            }

            & > div {
                display: flex;
                flex-direction: row;
                align-items: center;
                column-gap: 0;

                & > div {
                    flex-grow: 1;
                    border-right: solid var(--size--border) var(--color--border);

                    & > label {
                        margin-right: 0;
                    }

                    & > input {
                        padding: var(--space-2xs);
                        height: auto;
                    }
                }
            }
        }
    }
    @media screen and (min-width: 600px) {
        div.primary-color {
            grid-template-columns: 2fr 1fr;

            & .color-card {
                margin-bottom: 0;
            }
        }
    }

    @media screen and (min-width: 1000px) {
        div.primary-color {
            grid-template-columns: subgrid;
            grid-column: 1 / -1;
            display: grid;
            grid-template-columns: subgrid;
            align-items: stretch;

            & .color-card {
                grid-column: span 2;
            }

        }
    }
}