@ou-imdt/css/src/native/label.css

The IMDT CSS library styles native elements with light, extendable CSS. It is developed for Interactive Media Developers at the Open University.

:root,
:host {
    /* Label */
    --label-weight: bold;
    --label-fieldset-weight: normal;
    --label-margin: 0.5rem 0 0.5rem 0;
    --label-max-width: 100%;

    /* labels inside a fieldset  */
    --label-display: block;
    --label-implicit-display: inline-flex;
}

label {
    font-size: var(--font-size);
    font-weight: var(--label-weight);
    display: var(--label-display);
    align-items: center;
    flex-flow: row;
    flex-wrap: wrap;
    gap: var(--spacing, 0.5rem);
    margin: var(--label-margin);
    max-width: var(--label-max-width);

    &:not(:last-of-type) {
        margin-inline-end: 1rem;
    }
}

label:not([for]) {
    display: var(--label-implicit-display)
}

label:has(>input[type="checkbox"], >input[type="radio"]) {
    display: inline-flex;
}

label input[type="checkbox"],
label input[type="radio"] {
    /* display: inline-flex;
    vertical-align: middle; */
}

fieldset label {
    font-weight: var(--label-fieldset-weight);
}