$form-field-margin: 0.75rem !default;

.field {
    &:not(:last-child) {
        margin-bottom: $form-field-margin;
    }
}

.field-body {
    .field {
        margin-bottom: 0;
    }
}

.checkbox {
    display: none;

    + label {
        cursor: pointer;
        user-select: none;
        position: relative;
        color: $label-color;
        padding-left: 1.75rem;
        display: inline-block;

        &:before {
            @include fa(21px, 16px);
            
            left: 0;
            top: 50%;
            content: '';
            position: absolute;
            transform: translateY(-50%);
            border-radius: $radius-small;
            background-color: transparent;
            border: solid 1px $input-border-color;
        }
    }

    &:checked + label {
        &:before {
            border-color: $primary;
            background-color: $primary;
        }

        &:after {
            top: 50%;
            left: 6px;
            width: 5px;
            content: "";
            height: 9px;
            position: absolute;
            background-color: transparent;
            border-right: 2px solid $white;
            border-bottom: 2px solid $white;
            transform: translateY(calc(-50% - 1px)) rotate(45deg);
        }
    }

    &[type='radio'] {
        + label {
            &:before {
                border-radius: 50%;
            }
        }

        &:checked + label {
            &:before {
                background-color: transparent;
                border: solid 1px $input-border-color;
            }

            &:after {
                @include fa(21px, 8px);

                left: 4px;
                content: "";
                border: none;
                position: absolute;
                border-radius: 50%;
                background-color: $primary;
                transform: translateY(-50%);
            }
        }
    }
}