@layer components {
    div.color-palette {
        display: block;
        flex-grow: 1;
        grid-template-columns: auto 1fr;
        column-gap: 0;

        & label, & output {
            border: solid var(--size--border) var(--color--border);
        }

        & label {
            border-right: none;
            flex-grow: 1;
            display: flex;
            align-items: center;
            padding-left: var(--space-xs);

            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);
        }

        & output {
            width: 3rem;
            height: 3rem;
            aspect-ratio: 1 / 1;
            display: block;
            box-sizing: content-box;
        }

        & div {
            display: flex;
            border: none;
            column-gap: 0;

            & label {
                border-left: none;
            }

            &:not(:first-child) {
                & label, & output {
                    border-top: none;
                }
            }
        }
    }
}