@layer components {
    .blank-slate {
        align-self: center;
        border: 2px dashed var(--rule);
        border-radius: 0.5ch;
        color: var(--ink);
        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--page {
        align-items: center;
        border-width: 0;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        margin-block: 6dvh auto;
        margin-inline: auto;
        max-inline-size: 52ch;
        padding: 1.5rem 0;
        rotate: 0deg;
    }

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

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