// @import "../core/core";

//  = RADIO BUTTON
//  ---------------------------------------------------------------------------

@mixin dc-radio($sibling-label-selector : ".dc-label") {
    width: 0;
    height: 0;
    opacity: 0;


    + #{$sibling-label-selector} {
        display: inline-block;
        position: relative;
        margin-right: $dc-space150;
        margin-bottom: 0;
        padding-left: $dc-space200 - $dc-space75;
        font-size: $dc-body-font-size;
        font-weight: $dc-normal-font-weight;
        line-height: $dc-space150;
        text-transform: none;
        cursor: pointer;

        &:before,
        &:after {
            position: absolute;
            top: .1rem;
            left: 0;
            width: 2rem;
            height: 2rem;
            border: 1px solid $dc-gray60;
            border-radius: $dc-radius100;
            // scss-lint:disable ColorVariable
            background: #fff;
            // scss-lint:enable ColorVariable
            content: " ";
        }

        &:after {
            top: .6rem;
            left: .5rem;
            width: 1rem;
            height: 1rem;
            transform: scale3d(.5, .5, 1);
            transition: transform .1s ease-in-out, opacity .2s linear;
            opacity: 0;
        }
    }

    &:focus + #{$sibling-label-selector}:before {
        border-color: $dc-blue40;
    }

    &:checked + #{$sibling-label-selector}:after {
        transform: scale3d(1, 1, 1);
        background: $dc-blue40;
        opacity: 1;
    }

    &[disabled] + #{$sibling-label-selector} {
        color: $dc-gray50;
        cursor: default;

        &:before,
        &:after {
            border-color: $dc-gray70;
        }

        &:after {
            // scss-lint:disable ImportantRule
            background: $dc-gray60 !important;
            // scss-lint:enable ImportantRule
        }
    }

    + #{$sibling-label-selector}:before,
    + #{$sibling-label-selector}:after {
        border-radius: 50%;
    }

    + #{$sibling-label-selector}:after {
        border-color: darken($dc-blue40, 5%);
    }
}

@mixin dc-radio-selectors {
    .dc-radio {
        @include dc-radio;
    }
}