@layer components {
    :root {
        --patience-pad-status: var(--secondary-label);
        --patience-pad-counts: var(--label);
    }

    .patience-pad {
        align-items: center;
        column-gap: 0.75rem;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .patience-pad__text {
        display: grid;
        min-inline-size: 0;
        row-gap: 0.125rem;
    }

    .patience-pad__status {
        align-content: end;
        color: var(--patience-pad-status);
        display: grid;
        font-size: 0.9375rem;
        line-height: 1.3;
        margin: 0;
        min-block-size: 2.6em;
    }

    .patience-pad__counts {
        color: var(--patience-pad-counts);
        font-size: 0.875rem;
        font-variant-numeric: tabular-nums;
        font-weight: 600;
        margin: 0;
    }

    .patience-pad__let-go {
        min-block-size: 2.75rem;
        white-space: nowrap;
    }
}