/* Status legend (a List subclass) laid out as a row of toggles. The status colours are defined in app.css */
.b-list.airport-legend {
    --b-list-background                : transparent;
    --b-list-multi-select-item-padding : .25em .4em;
    --b-list-multi-select-gap          : .5em;
    --b-list-item-gap                  : .5em;
    --b-list-item-color                : var(--airport-text-tag);
    --b-list-item-selected-background  : transparent;
    --b-list-item-focus-background     : transparent;

    flex-direction                     : row;
    font-size                          : .85em;
    outline                            : none;

    .b-list-item {
        align-items   : center;
        gap           : var(--b-list-item-gap);
        border-radius : .25em;

        &:hover {
            --b-list-item-color : var(--airport-text);
        }

        /* No checkbox icons, the swatch shows the state. List has no public option to hide the multi-select icon */
        .b-selected-icon {
            display : none;
        }

        /* Hidden statuses only show a hollow swatch, the label stays readable */
        &:not(.b-selected) .airport-legend-swatch {
            background : transparent;
            box-shadow : inset 0 0 0 1.5px var(--airport-status);
        }

        /* List focuses the items themselves, ring them for keyboard navigation only. Inset, the list clips overflow */
        &:focus-visible {
            outline        : 2px solid var(--b-widget-focus-outline-color);
            outline-offset : -2px;
        }
    }
}

.airport-legend-swatch {
    width         : .7em;
    height        : .7em;
    border-radius : .2em;
    background    : var(--airport-status);
    transition    : background 0.15s, box-shadow 0.15s;
}