// ==========================================================================
// Fields - Checkbox, Radio
// ==========================================================================

.fui-checkbox,
.fui-radio {
    // Resets
    position: relative;
    font-family: inherit;
    font-size: var(--fui-check-font-size);
    line-height: var(--fui-check-line-height);
    margin: 0;
    appearance: none;
    user-select: none;

    &:not(:last-child) {
        margin-bottom: var(--fui-check-margin-bottom);
    }

    .fui-layout-horizontal .fui-layout-wrap > & {
        margin-right: var(--fui-check-margin-right);
    }

    input {
        clip: rect(0, 0, 0, 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        position: absolute;
        width: 1px;

        &:focus + label::before {
            border-color: var(--fui-check-border-color-focus, var(--fui-focus-border-color));
            box-shadow: var(--fui-check-box-shadow-focus, var(--fui-focus-shadow));
        }

        &:checked + label::before {
            background-color: var(--fui-check-bg-color-checked, var(--fui-primary-color));
            border-color: var(--fui-check-border-color-checked, var(--fui-primary-color));
        }

        &:active + label::before {
            background-color: var(--fui-check-bg-color);
        }
    }

    label {
        position: relative;
        padding-left: var(--fui-check-label-padding-left);
        line-height: var(--fui-check-label-line-height); // rem is deliberate
        display: inline-block;
        transition: var(--fui-check-label-transition);

        &::before {
            position: absolute;
            top: var(--fui-check-label-top);
            left: 0;
            display: block;
            width: var(--fui-check-label-width);
            height: var(--fui-check-label-height);
            content: '';
            cursor: pointer;
            border: var(--fui-check-label-border, 1px solid var(--fui-border-color));
            background-color: var(--fui-check-label-bg-color);
            background-repeat: no-repeat;
            background-position: center center;
            background-size: 50% 50%;
            transition: var(--fui-check-label-transition);
        }
    }
}


// ==========================================================================
// Fields - Checkbox
// ==========================================================================

.fui-checkbox {
    label::before {
        border-radius: var(--fui-check-check-border-radius);
    }

    input:checked + label::before {
        background-image: var(--fui-check-check-bg-image);
        background-size: var(--fui-check-check-bg-size);
    }
}


// ==========================================================================
// Fields - Radio
// ==========================================================================

.fui-radio {
    label::before {
        border-radius: var(--fui-check-radio-border-radius);
    }

    input:checked + label::before {
        background-image: var(--fui-check-radio-bg-image);
        background-size: var(--fui-check-radio-bg-size);
    }
}

