@layer components {
    /* A meter is SwiftUI's linear ProgressView: a thin track in the tertiary
       fill that fills the width it's offered (in a row stack it shares the
       free space), with the amount in the tint. */
    .meter {
        display: block;
        inline-size: 100%;
        block-size: 0.375rem;
        overflow: hidden;
        border-radius: 0.1875rem;
        background-color: var(--tertiary-system-fill);
    }

    .stack--direction-row > .meter,
    .stack--direction-row > .meter-view {
        flex: 1 1 5rem;
        inline-size: auto;
        min-inline-size: 3rem;
    }

    /* On a material, over imagery, the amount is white. */
    .meter[class*="-material"] .meter__fill {
        background-color: oklch(100% 0 0deg);
    }

    .meter__fill {
        block-size: 100%;
        border-radius: inherit;
        background-color: var(--tint);
    }

    /* Segmented: a proportion bar. Each segment is a fill sized as its share
       of the total, in its system colour, with a hairline between them. */
    .meter--segmented {
        display: flex;
        gap: 0.125rem;
        block-size: 0.75rem;
        border-radius: 0.25rem;
        background-color: var(--quaternary-system-fill);
    }

    .meter--segmented .meter__fill {
        flex-shrink: 0;
        border-radius: 0;
    }

    .meter__fill--color-gray {
        background-color: var(--system-gray);
    }

    .meter__fill--color-red {
        background-color: var(--system-red);
    }

    .meter__fill--color-orange {
        background-color: var(--system-orange);
    }

    .meter__fill--color-yellow {
        background-color: var(--system-yellow);
    }

    .meter__fill--color-green {
        background-color: var(--system-green);
    }

    .meter__fill--color-mint {
        background-color: var(--system-mint);
    }

    .meter__fill--color-teal {
        background-color: var(--system-teal);
    }

    .meter__fill--color-cyan {
        background-color: var(--system-cyan);
    }

    .meter__fill--color-blue {
        background-color: var(--system-blue);
    }

    .meter__fill--color-indigo {
        background-color: var(--system-indigo);
    }

    .meter__fill--color-purple {
        background-color: var(--system-purple);
    }

    .meter__fill--color-pink {
        background-color: var(--system-pink);
    }

    .meter__fill--color-brown {
        background-color: var(--system-brown);
    }

    .meter__fill--width-0 {
        inline-size: 0%;
    }

    .meter__fill--width-1 {
        inline-size: 1%;
    }

    .meter__fill--width-2 {
        inline-size: 2%;
    }

    .meter__fill--width-3 {
        inline-size: 3%;
    }

    .meter__fill--width-4 {
        inline-size: 4%;
    }

    .meter__fill--width-5 {
        inline-size: 5%;
    }

    .meter__fill--width-6 {
        inline-size: 6%;
    }

    .meter__fill--width-7 {
        inline-size: 7%;
    }

    .meter__fill--width-8 {
        inline-size: 8%;
    }

    .meter__fill--width-9 {
        inline-size: 9%;
    }

    .meter__fill--width-10 {
        inline-size: 10%;
    }

    .meter__fill--width-11 {
        inline-size: 11%;
    }

    .meter__fill--width-12 {
        inline-size: 12%;
    }

    .meter__fill--width-13 {
        inline-size: 13%;
    }

    .meter__fill--width-14 {
        inline-size: 14%;
    }

    .meter__fill--width-15 {
        inline-size: 15%;
    }

    .meter__fill--width-16 {
        inline-size: 16%;
    }

    .meter__fill--width-17 {
        inline-size: 17%;
    }

    .meter__fill--width-18 {
        inline-size: 18%;
    }

    .meter__fill--width-19 {
        inline-size: 19%;
    }

    .meter__fill--width-20 {
        inline-size: 20%;
    }

    .meter__fill--width-21 {
        inline-size: 21%;
    }

    .meter__fill--width-22 {
        inline-size: 22%;
    }

    .meter__fill--width-23 {
        inline-size: 23%;
    }

    .meter__fill--width-24 {
        inline-size: 24%;
    }

    .meter__fill--width-25 {
        inline-size: 25%;
    }

    .meter__fill--width-26 {
        inline-size: 26%;
    }

    .meter__fill--width-27 {
        inline-size: 27%;
    }

    .meter__fill--width-28 {
        inline-size: 28%;
    }

    .meter__fill--width-29 {
        inline-size: 29%;
    }

    .meter__fill--width-30 {
        inline-size: 30%;
    }

    .meter__fill--width-31 {
        inline-size: 31%;
    }

    .meter__fill--width-32 {
        inline-size: 32%;
    }

    .meter__fill--width-33 {
        inline-size: 33%;
    }

    .meter__fill--width-34 {
        inline-size: 34%;
    }

    .meter__fill--width-35 {
        inline-size: 35%;
    }

    .meter__fill--width-36 {
        inline-size: 36%;
    }

    .meter__fill--width-37 {
        inline-size: 37%;
    }

    .meter__fill--width-38 {
        inline-size: 38%;
    }

    .meter__fill--width-39 {
        inline-size: 39%;
    }

    .meter__fill--width-40 {
        inline-size: 40%;
    }

    .meter__fill--width-41 {
        inline-size: 41%;
    }

    .meter__fill--width-42 {
        inline-size: 42%;
    }

    .meter__fill--width-43 {
        inline-size: 43%;
    }

    .meter__fill--width-44 {
        inline-size: 44%;
    }

    .meter__fill--width-45 {
        inline-size: 45%;
    }

    .meter__fill--width-46 {
        inline-size: 46%;
    }

    .meter__fill--width-47 {
        inline-size: 47%;
    }

    .meter__fill--width-48 {
        inline-size: 48%;
    }

    .meter__fill--width-49 {
        inline-size: 49%;
    }

    .meter__fill--width-50 {
        inline-size: 50%;
    }

    .meter__fill--width-51 {
        inline-size: 51%;
    }

    .meter__fill--width-52 {
        inline-size: 52%;
    }

    .meter__fill--width-53 {
        inline-size: 53%;
    }

    .meter__fill--width-54 {
        inline-size: 54%;
    }

    .meter__fill--width-55 {
        inline-size: 55%;
    }

    .meter__fill--width-56 {
        inline-size: 56%;
    }

    .meter__fill--width-57 {
        inline-size: 57%;
    }

    .meter__fill--width-58 {
        inline-size: 58%;
    }

    .meter__fill--width-59 {
        inline-size: 59%;
    }

    .meter__fill--width-60 {
        inline-size: 60%;
    }

    .meter__fill--width-61 {
        inline-size: 61%;
    }

    .meter__fill--width-62 {
        inline-size: 62%;
    }

    .meter__fill--width-63 {
        inline-size: 63%;
    }

    .meter__fill--width-64 {
        inline-size: 64%;
    }

    .meter__fill--width-65 {
        inline-size: 65%;
    }

    .meter__fill--width-66 {
        inline-size: 66%;
    }

    .meter__fill--width-67 {
        inline-size: 67%;
    }

    .meter__fill--width-68 {
        inline-size: 68%;
    }

    .meter__fill--width-69 {
        inline-size: 69%;
    }

    .meter__fill--width-70 {
        inline-size: 70%;
    }

    .meter__fill--width-71 {
        inline-size: 71%;
    }

    .meter__fill--width-72 {
        inline-size: 72%;
    }

    .meter__fill--width-73 {
        inline-size: 73%;
    }

    .meter__fill--width-74 {
        inline-size: 74%;
    }

    .meter__fill--width-75 {
        inline-size: 75%;
    }

    .meter__fill--width-76 {
        inline-size: 76%;
    }

    .meter__fill--width-77 {
        inline-size: 77%;
    }

    .meter__fill--width-78 {
        inline-size: 78%;
    }

    .meter__fill--width-79 {
        inline-size: 79%;
    }

    .meter__fill--width-80 {
        inline-size: 80%;
    }

    .meter__fill--width-81 {
        inline-size: 81%;
    }

    .meter__fill--width-82 {
        inline-size: 82%;
    }

    .meter__fill--width-83 {
        inline-size: 83%;
    }

    .meter__fill--width-84 {
        inline-size: 84%;
    }

    .meter__fill--width-85 {
        inline-size: 85%;
    }

    .meter__fill--width-86 {
        inline-size: 86%;
    }

    .meter__fill--width-87 {
        inline-size: 87%;
    }

    .meter__fill--width-88 {
        inline-size: 88%;
    }

    .meter__fill--width-89 {
        inline-size: 89%;
    }

    .meter__fill--width-90 {
        inline-size: 90%;
    }

    .meter__fill--width-91 {
        inline-size: 91%;
    }

    .meter__fill--width-92 {
        inline-size: 92%;
    }

    .meter__fill--width-93 {
        inline-size: 93%;
    }

    .meter__fill--width-94 {
        inline-size: 94%;
    }

    .meter__fill--width-95 {
        inline-size: 95%;
    }

    .meter__fill--width-96 {
        inline-size: 96%;
    }

    .meter__fill--width-97 {
        inline-size: 97%;
    }

    .meter__fill--width-98 {
        inline-size: 98%;
    }

    .meter__fill--width-99 {
        inline-size: 99%;
    }

    .meter__fill--width-100 {
        inline-size: 100%;
    }

    /* A meter with a label above, the current value below, or a legend of
       its segments, as ProgressView and Gauge lay them out. */
    .meter-view {
        display: flex;
        flex-direction: column;
        gap: 0.375rem;
        inline-size: 100%;
        min-inline-size: 0;
    }

    .meter-view__label {
        font-size: var(--font-size-subheadline);
    }

    .meter-view__value {
        color: var(--secondary-label);
        font-size: var(--font-size-footnote);
        font-variant-numeric: tabular-nums;
    }

    .meter-view__legend {
        display: flex;
        flex-wrap: wrap;
        gap: 0.25rem 1rem;
        margin: 0;
        padding: 0;
        list-style: none;
        font-size: var(--font-size-footnote);
    }

    .meter-view__item {
        display: flex;
        align-items: center;
        gap: 0.375rem;
    }

    .meter-view__dot {
        inline-size: 0.5rem;
        block-size: 0.5rem;
        border-radius: 50%;
        background-color: var(--system-gray);
    }

    .meter-view__dot--color-gray {
        background-color: var(--system-gray);
    }

    .meter-view__dot--color-red {
        background-color: var(--system-red);
    }

    .meter-view__dot--color-orange {
        background-color: var(--system-orange);
    }

    .meter-view__dot--color-yellow {
        background-color: var(--system-yellow);
    }

    .meter-view__dot--color-green {
        background-color: var(--system-green);
    }

    .meter-view__dot--color-mint {
        background-color: var(--system-mint);
    }

    .meter-view__dot--color-teal {
        background-color: var(--system-teal);
    }

    .meter-view__dot--color-cyan {
        background-color: var(--system-cyan);
    }

    .meter-view__dot--color-blue {
        background-color: var(--system-blue);
    }

    .meter-view__dot--color-indigo {
        background-color: var(--system-indigo);
    }

    .meter-view__dot--color-purple {
        background-color: var(--system-purple);
    }

    .meter-view__dot--color-pink {
        background-color: var(--system-pink);
    }

    .meter-view__dot--color-brown {
        background-color: var(--system-brown);
    }
}