@layer components {
    data-list {
        display: grid;
        gap: var(--size-2);

        > :is(li, div) {
            list-style-type: none;
            display: grid;
            grid-template-columns: auto auto;
            gap: var(--size-2);
            align-items: center;
            justify-content: space-between;

            strong {
                color: var(--color-gunmetal);
            }

            span {
                color: var(--color-steel);
            }

            &:has([required]) label[for]:not(:empty):after {
                content: ' *';
                color: var(--color-red);
            }

            :only-child {
                grid-column: 1/-1;
            }

            .span-cols-2 {
                grid-column: 1 / 3;
            }

            label:has(:checked)>span,
            &:has(:checked) .checked-highlight {
                color: var(--color-green);
            }
        }

        &[subgrid] {
            grid-template-columns: 1fr;
            justify-content: start;

            @media screen and (min-width: 768px) {
                grid-template-columns: auto 1fr;
            }

            > :is(li, div) {
                grid-column: 1/-1;
                grid-template-columns: subgrid;
                justify-content: unset;

                @media screen and (min-width: 768px) {
                    gap: var(--size-4);
                }
            }
        }

        &[striped] {
            > :is(li, div):nth-child(odd) {
                background-color: var(--color-lightgrey);
            }
        }

        .hr {
            padding-top: var(--size-2);
            border-top: thick double var(--color-bordergrey);
        }
    }
}