@layer components {
    :root {
        --traffic-jam-pad-status: var(--secondary-label);
        --traffic-jam-pad-value: var(--label);
        --traffic-jam-pad-name: var(--secondary-label);
    }

    .traffic-jam-pad {
        display: grid;
        gap: 0.625rem;
    }

    .traffic-jam-pad__status {
        align-content: center;
        color: var(--traffic-jam-pad-status);
        display: grid;
        font-size: 0.9375rem;
        line-height: 1.3;
        margin: 0;
        min-block-size: 2.5rem;
        text-align: center;
        text-wrap: balance;
    }

    .traffic-jam-pad__bar {
        align-items: center;
        display: grid;
        gap: 1rem;
        grid-template-columns: auto minmax(0, 1fr);
    }

    .traffic-jam-pad__metrics {
        display: flex;
        gap: 1.25rem;
        margin: 0;
        padding-inline: 0.5rem 0.25rem;
    }

    .traffic-jam-pad__metric {
        align-items: center;
        display: flex;
        flex-direction: column-reverse;
        min-inline-size: 2.5rem;
    }

    .traffic-jam-pad__value {
        color: var(--traffic-jam-pad-value);
        font-size: 1.375rem;
        font-variant-numeric: tabular-nums;
        font-weight: 700;
        line-height: 1.15;
    }

    .traffic-jam-pad__name {
        color: var(--traffic-jam-pad-name);
        font-size: 0.75rem;
        line-height: 1.2;
    }

    .traffic-jam-pad__release {
        inline-size: 100%;
        min-block-size: 3rem;
    }
}