.radio-checkbox-label {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    flex-direction: row;
    text-align: left;
}

.radio-checkbox-label__required {
    display: inline-block;
    margin-left: var(--apHspacingSmall);
    font-style: italic;
}

.radio-checkbox-label + .radio-checkbox-label {
    margin-top: var(--apHspacing);
}

@supports (-webkit-appearance: none) or (-moz-appearance: none) {
    input.radio[type="radio"] {
        --border-color: var(--apInputBorderColor);
        --bg-color: #fff;
        --dot-color: var(--bg-color);
        --size: var(--apFontSizeDefault);
        appearance: none;
        -webkit-appearance: none;
        border-radius: 50%;
        background: var(--dot-color);
        border: calc(var(--size) * 0.3) solid var(--bg-color);
        box-shadow: 0 0 0 var(--apBorderWidth) var(--border-color);
        width: var(--apFontSizeDefault);
        height: var(--apFontSizeDefault);
        /* 0.1 is visual adjustment to make it line up nicely on the vertical */
        margin-right: calc(var(--apHspacingSmall) + 0.1rem);
        margin-left: 0.1rem;
        flex: 0 0 auto;
    }

    input.radio[type="radio"]:checked {
        --border-color: var(--apInputBorderSelectedColor);
        --dot-color: var(--apInputTextColor);
    }

    input.radio[type="radio"]:focus,
    input.radio[type="radio"]:hover {
        --border-color: var(--apInputBorderFocusColor);
    }
    input.radio[type="radio"]:focus {
        outline: none;
    }

    input.radio[type="radio"]:disabled {
        --border-color: var(--apInputBorderColor);
        --bg-color: var(--apInputDisabledBgColor);
        cursor: not-allowed;
    }
}


@supports (-webkit-appearance: none) or (-moz-appearance: none) {
    input.checkbox[type="checkbox"] {
        --border-color: var(--apInputBorderColor);
        --bg-color: #fff;
        --dot-color: var(--apInputTextColor);
        --dot-opacity: 0;
        --size: var(--apFontSizeDefault);

        -webkit-appearance: none;
        appearance: none;
        background-color: var(--bg-color);
        margin: 0;
    
        font: inherit;
        color: currentColor;
        width: calc(var(--size) * 1.3);
        height: calc(var(--size) * 1.3);
        border: var(--apBorderWidth) solid var(--border-color);
        border-radius: var(--apBorderWidth);
        transform: translateY(-0.075em);
    
        display: grid;
        place-content: center;
        margin-right: var(--apHspacingSmall);
        margin-top: calc(calc(var(--size) * 0.1));
        flex: 0 0 auto;
    }
    
    input.checkbox[type="checkbox"]::before {
        content: "";
        opacity: var(--dot-opacity);
        transition: opacity 0.18s;
        height: calc(var(--size) * 0.32);
        width: calc(var(--size) * 0.58);
        border-left: calc(var(--size) * 0.15) solid;
        border-bottom: calc(var(--size) * 0.15) solid;
        transform: rotate(-45deg);
    }

    input.checkbox[type="checkbox"]:checked {
        --border-color: var(--apInputBorderSelectedColor);
        --dot-opacity: 1;
    }

    input.checkbox[type="checkbox"]:focus,
    input.checkbox[type="checkbox"]:hover {
        --border-color: var(--apInputBorderFocusColor);
    }
    input.checkbox[type="checkbox"]:focus {
        outline: none;
    }

    input.checkbox[type="checkbox"]:disabled {
        --border-color: var(--apInputBorderColor);
        --bg-color: var(--apInputDisabledBgColor);
        cursor: not-allowed;
    }
}


.radio-checkbox-label-indent {
    margin-left: calc(var(--apFontSizeDefault) + var(--apBorderWidth) + var(--apBorderWidth) + var(--apHspacingSmall));
}