@layer components {
    basic-card {
        display: block;
        border-radius: var(--radius-2);
        background-color: var(--color-lightgrey);
        transition: background-color 0.2s ease;

        --accent: var(--color-steel);
        --title-bg: var(--accent);

        &[success] {
            --accent: var(--color-sage);
            --accent-opacity: 50%;

            outline: 1px solid color-mix(in srgb, var(--accent) var(--accent-opacity, 20%), transparent);
        }

        &[admin] {
            --title-bg: var(--color-dark);
            background-color: var(--color-white);
        }

        &[light] {
            background-color: var(--color-white);
        }

        &[dark] {
            background-color: var(--color-bordergrey);
        }

        &[accent] {
            background-color: var(--color-accent);
        }

        &[blue] {
            --bg-opacity: 20%;
            background-color: color-mix(in srgb, var(--color-altorange) var(--bg-opacity), transparent);
        }

        &[error],
        &[warn] {
            --accent: var(--color-red);

            background-color: var(--color-white);
            color: var(--color-red);
            border: 1px solid var(--color-bordergrey);
        }

        &[dropshadow] {
            box-shadow: 0px 0px 6px 1px color-mix(in srgb, var(--accent) var(--accent-opacity, 15%), transparent);
        }

        &[basic] {
            background-color: var(--color-white);

            > article {
                padding: 0;
            }
        }

        &>div.header {
            display: flex;
            justify-content: space-between;

            margin-top: 0px;
            padding: var(--size-3) var(--size-4);

            color: var(--title, var(--color-white));
            font-size: var(--size-3);
            font-weight: var(--font-weight-4);

            border-radius: var(--radius-2) var(--radius-2) 0 0;
            background-color: var(--title-bg);

            [success]>& {
                color: var(--color-steel);
            }

            [error]>&,
            [warn]>& {
                color: var(--color-white);
            }

            [disabled]>& {
                color: var(--color-stainless);
                cursor: not-allowed;
            }

            [basic]>& {
                background-color: var(--color-white);
                border-bottom: solid 1px var(--color-stainless);
                color: var(--title);
            }

            a {
                color: inherit;

                &:hover {
                    color: color-mix(in hsl, currentColor 80%, transparent);
                }
            }
        }

        /* this card can be toggled */
        &[toggle] {
            .header > h2 {
                display: grid;
                grid-template-columns: auto 1fr auto;
                align-items: center;
                gap: var(--size-1);

                &::before {
                    display: grid;
                    justify-content: center;
                    align-content: center;
                    padding: 0;
                    width: 1em;
                    height: 1em;
                    content: var(--large-marker);
                    fill: inherit;
                }

                svg {
                    flex: 0 0 auto;
                }
            }

            &[open] {
                .header > h2::before {
                    rotate: 90deg;
                }
            }

            &:not([open]) {
                article {
                    display: none;
                }
            }
        }

        &>article {
            padding: var(--size-4);

            >hr {
                width: calc(100% + var(--size-4) * 2);
                transform: translateX(calc(var(--size-4) * -1));
            }
        }

        /* Empty */
        &:has(article:empty) {
            --title-bg: var(--color-lightgrey);
            --title: var(--color-steel);

            &>h3 {
                border-radius: var(--radius-2);
            }

            &>article {
                display: none;
            }
        }

        hr.vertical {
            margin: calc(var(--size-4) * -1) 0;
            width: 1px;
            align-self: stretch;
        }
    }
}