.checkbox-area,
.radio-area,
.radio,
.radio-inline {
    position: relative;
    display: inline-block;
    margin-right: 1em;
    .rex-icon {
        display: none;
        position: absolute;
        &.check {
            left: 3px;
            top: 2px;
        }
    }
    label {
        cursor: pointer;
        font-size: 1.6rem;
        font-weight: normal;
        margin: 0;
        position: absolute;
        color: $gray;
        top: -.2rem;
        left: 4rem;
        &:active,
        &:focus {
            color: $gray-darker;
        }
    }
    input {
        display: none;
    }
}

// declarations
.checkbox-area {
    .checkbox-label {
        position: relative;
        top: 0;
        left: 0;
        padding-left: 4rem;
        &:before {
            @include radio-checkbox-base;
            position: absolute;
            top: 50%;
            left: 1.6rem;
            transform: translate(-50%, -50%);
            border-radius: $border-radius-base;
        }
    }
     :checked+.checkbox-label {
        color: $gray-darker;
        &:hover {
            &:before {
                border-color: $brand-primary;
            }
        }
        &:before {
            background: $brand-primary;
            border: solid 2px $brand-primary;
        }
        &:after {
            font-family: rex-icon;
            content: $_32-check;
            color: $white;
            position: absolute;
            top: 50%;
            left: 1.6rem;
            transform: translate(-50%, -50%);
            z-index: 3;
        }
    }
    &:hover {
        .checkbox-label:before {
            border: solid .2rem $brand-primary-lighten;
        }
    }
    &.disabled {
        @include disabled;
         :checked+.checkbox-label {
            &:before {
                background: transparent;
            }
        }
        input[type=checkbox] {
            cursor: initial;
        }
    }
}

.radio-area,
.radio-inline,
.radio {
    .radio-label {
        position: relative;
        top: 0;
        left: 0;
        padding-left: 4rem;
        &:before {
            @include radio-checkbox-base;
            border-radius: 50%;
            position: absolute;
            top: .18em;
            left: .4rem;
        }
    }
     :checked+label.radio-label {
        color: $gray-darker;
        &:hover {
            &:before {
                border-color: $brand-primary;
            }
        }
        &:before {
            background: $brand-primary;
            border: solid .2rem $brand-primary;
        }
        &:after {
            content: "";
            width: 1.2rem;
            height: 1.2rem;
            border-radius: 50%;
            top: .9rem;
            left: 1rem;
            position: absolute;
            z-index: 2;
            background-color: $white;
        }
    }
    &:hover {
        label.radio-label:before {
            border: solid .2rem $brand-primary-lighten;
        }
    }
    &.disabled {
        @include disabled;
        .radio-label {
            &:before {
                background-color: transparent;
            }
            &:after {
                background-color: transparent;
            }
        }
         :checked+label.radio-label {
            &:before {
                background-color: transparent;
            }
            &:after {
                background-color: transparent;
            }
        }
    }
}

.radio-form {
    .radio-area {
        margin-right: 1.6rem;
    }
}