@use "../termeh" as T;

label.checkbox,
label.radio {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    cursor: pointer;
    margin: 0;
    padding: 0;
    @include T.unselectable();

    input {
        accent-color: T.color("primary");
        cursor: pointer;
        flex: 0 0 auto;
        margin: 0;

        @include T.ltr() {
            margin-right: T.gap("micro");
        }

        @include T.rtl() {
            margin-left: T.gap("micro");
        }
    }

    @each $name, $color in T.colors(T.var("input", "colors", ())) {
        &.is-#{$name} {
            input {
                accent-color: $color;
            }
        }
    }

    &.is-disabled,
    fieldset[disabled] & {
        @include T.locked();
        color: T.variant("input", "disabled-color") !important;

        input {
            opacity: 0.5 !important;
        }
    }
}