@import "../../../css/static/mixin";
@import "../../../css/static/properties";

.container {
    $button_size: 1.2em;
    $mark_size: .6em;

    position: relative;

    width: $button_size;
    height: $button_size;

    cursor: pointer;

    overflow: hidden;

    background-color: #272626;
    border-radius: 50%;

    align-self: center;
    margin-right: .5em;

    input {
        position: absolute;
        width: 0;
        height: 0;
        opacity: 0;
    }

    .mark {
        position: absolute;
        opacity: 0;

        top: ($button_size - $mark_size) / 2;
        bottom: ($button_size - $mark_size) / 2;
        right: ($button_size - $mark_size) / 2;
        left: ($button_size - $mark_size) / 2;

        background-color: #46c0ec;
        box-shadow: 0 0 .5em 1px rgba(70, 192, 236, 0.4);
        border-radius: 50%;

        @include transition(.4s);
    }

    input:checked + .mark {
        opacity: 1;
    }

    @include transition(background-color $button_hover_animation_time);

    -webkit-box-shadow: inset 0 0 4px 0 rgba(0, 0, 0, 0.5);
    -moz-box-shadow: inset 0 0 4px 0 rgba(0, 0, 0, 0.5);
    box-shadow: inset 0 0 4px 0 rgba(0, 0, 0, 0.5);
}

label:hover > .container, .container:hover {
    &.container, > .container {
        background-color: #2c2b2b;
    }
}

label.disabled > .container, .container.disabled, .container:disabled {
    &.container, > .container {
        pointer-events: none!important;
        background-color: #1a1919!important;
    }
}