@layer components {
    .empty-state {
        position: relative;
        display: grid;
        gap: var(--space-3);
        justify-items: center;
        text-align: center;
        padding: var(--space-9) var(--space-4);
        border: 1px dashed var(--line);
        border-radius: var(--radius-l);
        background:
            radial-gradient(80% 80% at 50% 0%, var(--sky-tint) 0%, transparent 60%),
            var(--haze);
        overflow: hidden;
    }

    .empty-state-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 72px;
        height: 72px;
        border-radius: var(--radius-round);
        background: var(--paper);
        border: 2px solid var(--wheat);
        box-shadow: var(--shadow-1);
    }

    .empty-state-icon .icon {
        width: 34px;
        height: 34px;
        color: var(--sky);
    }

    .empty-state p {
        max-width: 32rem;
        color: var(--soil-2);
    }
}