@layer components {
    .blank-slate {
        align-self: center;
        border: 2px dashed var(--color-ink-lighter);
        border-radius: 0.5ch;
        color: var(--color-ink-dark);
        font-weight: 500;
        margin-block-start: 2dvh;
        padding: 1.5ch 2ch;
        rotate: -3deg;
        text-align: center;
    }

    .blank-slate--drag {
        background-color: color-mix(in srgb, transparent, var(--card-color) 5%);
        border-color: color-mix(in srgb, transparent, var(--card-color) 10%);
        color: color-mix(in srgb, transparent, var(--card-color) 75%);
        margin-block-start: 0;
        rotate: 0deg;

        .cards--considering & {
            background-color: var(--card-bg-color) !important;
        }

        .cards--grid & {
            display: none;
        }
    }

    .blank-slate--default {
        margin-block-start: 5dvh;

        .cards:not(.cards--grid) & {
            display: none;
        }
    }

    .blank-slate--filters {
        .cards--grid:has(.card) & {
            display: none;
        }
    }

    .cards:has(.card) .blank-slate {
        display: none;
    }
}