@layer components {
    :root {
        --poker-patience-next-status: var(--label);
        --poker-patience-next-hint: var(--secondary-label);
        --poker-patience-next-lift: light-dark(
            oklch(0.25 0.03 60 / 32%),
            oklch(0 0 0 / 70%)
        );
        --poker-patience-next-stack: light-dark(
            oklch(0.975 0.006 85),
            oklch(0.84 0.014 80)
        );
        --poker-patience-next-stack-edge: light-dark(
            oklch(0.3 0.02 60 / 28%),
            oklch(0 0 0 / 60%)
        );
        --poker-patience-next-empty: var(--separator);
    }

    .poker-patience-next {
        align-items: center;
        display: grid;
        gap: 0.875rem;
        grid-template-columns: 4rem 4rem minmax(0, 1fr);
    }

    .poker-patience-next__deck {
        aspect-ratio: 5 / 7;
        border-radius: 9% / 6.43%;
        display: grid;

        &.poker-patience-next__deck--thin {
            box-shadow:
                0 0.125rem 0 -0.0625rem var(--poker-patience-next-stack),
                0 0.125rem 0 0 var(--poker-patience-next-stack-edge);
        }

        &.poker-patience-next__deck--medium {
            box-shadow:
                0 0.125rem 0 -0.0625rem var(--poker-patience-next-stack),
                0 0.125rem 0 0 var(--poker-patience-next-stack-edge),
                0 0.25rem 0 -0.0625rem var(--poker-patience-next-stack),
                0 0.25rem 0 0 var(--poker-patience-next-stack-edge);
        }

        &.poker-patience-next__deck--thick {
            box-shadow:
                0 0.125rem 0 -0.0625rem var(--poker-patience-next-stack),
                0 0.125rem 0 0 var(--poker-patience-next-stack-edge),
                0 0.25rem 0 -0.0625rem var(--poker-patience-next-stack),
                0 0.25rem 0 0 var(--poker-patience-next-stack-edge),
                0 0.375rem 0 -0.0625rem var(--poker-patience-next-stack),
                0 0.375rem 0 0 var(--poker-patience-next-stack-edge);
        }

        &.poker-patience-next__deck--empty {
            border: 0.0625rem dashed var(--poker-patience-next-empty);
        }
    }

    .poker-patience-next__card {
        border-radius: 9% / 6.43%;
        cursor: grab;
        display: grid;
        perspective: 25rem;
        touch-action: none;
        user-select: none;
        -webkit-touch-callout: none;
        -webkit-user-select: none;

        &[data-poker-patience-dragging] {
            box-shadow: 0 1rem 1.75rem -0.25rem var(--poker-patience-next-lift);
            cursor: grabbing;
        }
    }

    .poker-patience-next__side {
        backface-visibility: hidden;
        display: grid;
        grid-area: 1 / 1;
        -webkit-backface-visibility: hidden;

        &.poker-patience-next__side--back {
            rotate: y 180deg;
        }
    }

    .poker-patience-next__text {
        display: grid;
        gap: 0.25rem;
        min-inline-size: 0;
    }

    .poker-patience-next__status {
        color: var(--poker-patience-next-status);
        font-size: 1.0625rem;
        font-variant-numeric: tabular-nums;
        font-weight: 700;
        margin: 0;
    }

    .poker-patience-next__hint {
        color: var(--poker-patience-next-hint);
        font-size: 0.875rem;
        line-height: 1.3;
        margin: 0;
    }
}