.radio-checkbox-label {
    font-size: var(--font-size-xs);
    display: flex;
    align-items: flex-start;
    text-align: left;
    text-wrap: pretty;
}

.radio-checkbox-label__required {
    display: inline-block;
    margin-left: 0.6rem;
    font-style: italic;
}

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

.radio[type='radio'],
.checkbox[type='checkbox'] {
    --border-color: var(--color-secondary-xlight);
    --background: #fff;
    --size: 1.1rem;
    --dot-opacity: 0;

    appearance: none;
    -webkit-appearance: none;
    background-color: var(--background);
    border: var(--border-width) solid var(--border-color);
    margin: 0;
    margin-right: 0.6rem;
    flex-shrink: 0;
}

.radio[type='radio'] {
    border-radius: 50%;
    box-shadow: 0 0 0 var(--border-width) var(--border-color);
    width: 1.2em;
    height: 1.2em;
}

.checkbox[type='checkbox'] {
    display: grid;
    place-content: center;
    width: calc(var(--size) * 1.3);
    height: calc(var(--size) * 1.3);
    border-radius: var(--border-width);
}

.checkbox[type='checkbox']::before {
    content: '';
    opacity: var(--dot-opacity);
    height: calc(var(--size) * 0.32);
    width: calc(var(--size) * 0.58);
    border-left: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: translateY(-2px) rotate(-45deg);
    transition: opacity 220ms var(--ease-out);
}

.radio[type='radio']:checked,
.checkbox[type='checkbox']:checked {
    --border-color: var(--color-secondary);
    --dot-opacity: 1;
}

.radio[type='radio']:focus,
.radio[type='radio']:hover,
.checkbox[type='checkbox']:focus,
.checkbox[type='checkbox']:hover {
    --border-color: var(--color-secondary);
}

.radio[type='radio']:focus,
.checkbox[type='checkbox']:focus {
    outline: none;
}

.radio[type='radio']:disabled,
.checkbox[type='checkbox']:disabled {
    --border-color: var(--color-secondary-xlight);
    --bg-color: var(--color-neutral-light);
    cursor: not-allowed;
}

.radio-checkbox-label-indent {
    margin-left: calc(var(--font-size-base) + 2 * var(--border-width) + 0.6rem);
}