/*@example <div is="card"></div><div is="card" has="shadow"></div>*/
@layer component {
    [is=card] {
        padding: var(--card-padding, var(--space-m));
        background: var(--card-background, var(--content-box-color));
        border-radius: var(--card-border-radius, var(--border-radius));

        &[has~=shadow] {
            box-shadow: var(--card-shadow, var(--default-box-shadow));
        }

        & > [is=toolbar] {
            background: var(--card-toolbar-background, var(--content-box-color));
            justify-content: flex-end;
            margin: calc(var(--space-m) * -1) calc(var(--space-m) * -1) 0;
            width: calc(100% + var(--space-m) * 2);
            border: none;
            outline: none;
            position: relative;
            padding: var(--card-toolbar-padding, var(--space-xs));
            border-radius: var(--card-toolbar-border-radius, var(--border-radius));
            gap: 0;

            &[for]:not([hidden]) {
                margin: calc(var(--space-m) * -1) calc(var(--space-m) * -1) 0;
                width: calc(100% + var(--space-m) * 2);
                border: none;
                outline: none;
                position: relative;
                padding: var(--card-toolbar-padding, var(--space-xs));
                border-radius: var(--card-toolbar-border-radius, var(--border-radius));
                gap: 0;
            }

            & [is=icon-button] {
                width: var(--card-toolbar-icon-button-size, var(--size-m));
                height: var(--card-toolbar-icon-button-size, var(--size-m));
                font-size: var(--font-size-s);
            }
        }
    }
}