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

@mixin dc-checkbox($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;
        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);
        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}:after {
        top: .2rem;
        left: .2rem;
        width: 2rem;
        height: 2rem;
        border: 0 none;
        background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyB3aWR0aD0iMThweCIgaGVpZ2h0PSIxOHB4IiB2aWV3Qm94PSIwIDAgMTggMTgiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sbnM6c2tldGNoPSJodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMiPiAgICAgICAgPHRpdGxlPkNoZWNrYm94PC90aXRsZT4gICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+ICAgIDxkZWZzPjwvZGVmcz4gICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc2tldGNoOnR5cGU9Ik1TUGFnZSI+ICAgICAgICA8ZyBpZD0iQ2hlY2tib3giIHNrZXRjaDp0eXBlPSJNU0FydGJvYXJkR3JvdXAiIHN0cm9rZT0iIzI2QUFGRSIgc3Ryb2tlLXdpZHRoPSIzIj4gICAgICAgICAgICA8cGF0aCBkPSJNMyw5LjMyNjk5ODQ5IEw2LjY0OTA5ODM2LDEzLjUwOTQxNTQgTDE1LjAyNzgzMiwzLjUiIGlkPSJQYXRoLTE2IiBza2V0Y2g6dHlwZT0iTVNTaGFwZUdyb3VwIj48L3BhdGg+ICAgICAgICA8L2c+ICAgIDwvZz48L3N2Zz4=);
    }

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

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

        &:after {
            // scss-lint:disable ImportantRule
            background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyB3aWR0aD0iMThweCIgaGVpZ2h0PSIxOHB4IiB2aWV3Qm94PSIwIDAgMTggMTgiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sbnM6c2tldGNoPSJodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMiPiAgICAgICAgPHRpdGxlPkNoZWNrYm94IGRpc2FibGVkPC90aXRsZT4gICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+ICAgIDxkZWZzPjwvZGVmcz4gICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc2tldGNoOnR5cGU9Ik1TUGFnZSI+ICAgICAgICA8ZyBpZD0iQ2hlY2tib3gtZGlzYWJsZWQiIHNrZXRjaDp0eXBlPSJNU0FydGJvYXJkR3JvdXAiIHN0cm9rZT0iI0VERUNFRCIgc3Ryb2tlLXdpZHRoPSIzIj4gICAgICAgICAgICA8cGF0aCBkPSJNMyw5LjMyNjk5ODQ5IEw2LjY0OTA5ODM2LDEzLjUwOTQxNTQgTDE1LjAyNzgzMiwzLjUiIGlkPSJQYXRoLTE2IiBza2V0Y2g6dHlwZT0iTVNTaGFwZUdyb3VwIj48L3BhdGg+ICAgICAgICA8L2c+ICAgIDwvZz48L3N2Zz4=) !important;
            // scss-lint:enable ImportantRule
        }
    }

    + #{$sibling-label-selector} {
        font-size: $dc-body-font-size;
        font-weight: $dc-normal-font-weight;
        line-height: $dc-space150;
        text-transform: none;
    }
}

@mixin dc-checkbox--alt($sibling-label-selector: ".dc-label") {
    + #{$sibling-label-selector} {
        padding-left: $dc-space200;
        line-height: $dc-space150;

        &:before,
        &:after {
            width: 2.6rem;
            height: 1.3rem;
            margin-top: .3rem;
            transition: background-color .3s linear,
            transform .1s cubic-bezier(.105, .420, .425, 1);
        }

        &:after {
            width: 1.1rem;
            height: 1.1rem;
            margin-top: .4rem;
            transform: scale3d(1, 1, 1);
            border-radius: 1px;
            background: $dc-gray50;
            opacity: 1;
        }
    }

    &:checked + #{$sibling-label-selector} {
        &:after {
            transform: translateX(1.3rem);
            transition: background-color .1s linear, transform .1s cubic-bezier(.105, .420, .425, 1);
            background: none;
            background-color: $dc-green30;
        }
    }

    &[disabled] + #{$sibling-label-selector} {
        &:after {
            // scss-lint:disable ImportantRule
            background: none !important;
            background-color: $dc-gray60 !important;
            // scss-lint:enable ImportantRule
        }
    }

}

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

    .dc-checkbox--alt {
        @include dc-checkbox--alt;
    }
}