@charset "UTF-8";

@import '../../next-core/lib/next.scss';
@import "./scss/variable.scss";


#{$radio-prefix} {
    @include box-sizing;

    display: inline-block;
    overflow: hidden;
    vertical-align: middle;
    line-height: 1.28571;
    position: relative;
    width: $radio-width;
    height: $radio-width;

    &-group {
        display: inline-block;
        #{$radio-prefix}-label{
            color: $radio-normal-font-color;
        }
        &.disabled #{$radio-prefix}-label {
            color: $radio-normal-font-color-disabled;
        }
    }

    input[type="radio"] {
        opacity: 0;
        position: absolute;
        top: 0;
        left: 0;
        width: $radio-width;
        height: $radio-width;
        margin: 0;
    }

    #{$radio-prefix}-inner {
        &.mouseDown{
            transform: scale3d(0.7, 0.7, 0.7);
            transition: transform 0.2s linear;
        }
        &.mouseUp{
            transform: scale3d(1, 1, 1);
            transition: transform 0.2s linear;
        }

        display: inline-block;
        width: 100%;
        height: 100%;
        background: $radio-bg-color;
        border-radius: $radio-radius-size;
        border: 1px solid $radio-border-color;
        transition: ease all 0.3s 0s;

        &:after {
            transform: scale(0);
            position: absolute;
            border-radius: $radio-radius-size;
            top: 50%;
            margin-top: -($radio-circle-size / 2);
            left: 50%;
            margin-left: -($radio-circle-size / 2);
            background: $color-white;
            content: ' ';
            transition: ease all .3s 0s;
        }
    }

    &.checked {
        #{$radio-prefix}-inner {
            border-color: $radio-checked-border-color;
            background: $radio-checked-bg-color;
            &:hover {
                border-color: $radio-checked-hovered-border-color;
            }
            &:after {
                width: $radio-circle-size;
                height: $radio-circle-size;
                font-weight: bold;
                background: $radio-checked-circle-color;
                transform:  scale(1);
            }
        }
    }

    &.disabled {
        input[type="radio"] {
            cursor: not-allowed;
        }
        #{$radio-prefix}-inner {
            border-color: $radio-disabled-border-color;
            background: $radio-disabled-bg-color;

            &:hover {
                border-color: $radio-disabled-border-color;
            }
        }
        &.checked{
            #{$radio-prefix}-inner {
                &:after {
                    background: $radio-disabled-circle-color;
                }
            }
        }


    }

    &.hovered,
    &.focused {
        #{$radio-prefix}-inner {
            border-color: $radio-hovered-border-color;
            background-color: $radio-hovered-bg-color;
        }
    }

    &.checked.hovered,
    &.checked.focused {
        #{$radio-prefix}-inner {
            border-color: $radio-checked-hovered-border-color;
            background: $radio-checked-hovered-bg-color;
            &:after{
                background: $radio-checked-hovered-circle-color;
            }
        }
    }

    &-button {
        #{$radio-prefix} {
            width: 0;
            height: 0;
        }

        input[type="radio"] {
            width: 0;
            height: 0;
        }

        > label {
            display: inline-block;
            box-sizing: border-box;
            position: relative;
            z-index: 1;
            margin: 0 0 0 -1px;
            border: 1px solid $radio-button-border-color;
            background-color: $radio-button-bg-color;
            transition: ease all .3s 0s;

            #{$radio-prefix}-label {
                display: block;
                color: $radio-button-font-color;
                margin: 0;
                transition: ease all .3s 0s;
            }

            &:first-child {
                margin-left: 0;
                border-top-left-radius: $radio-button-radius-size;
                border-bottom-left-radius: $radio-button-radius-size;
            }

            &:last-child {
                border-top-right-radius: $radio-button-radius-size;
                border-bottom-right-radius: $radio-button-radius-size;
            }

            &:hover, &.hovered {
                z-index: 10;
                border-color: $radio-button-border-color-hovered;
                background-color: $radio-button-bg-color-hovered;

                #{$radio-prefix}-label {
                    color: $radio-button-font-color-hovered;
                }
            }

            &.checked {
                z-index: 10;
                border-color: $radio-button-border-color-checked;
                background-color: $radio-button-bg-color-checked;

                #{$radio-prefix}-label {
                    color: $radio-button-font-color-checked;
                }
            }

            &.disabled {
                z-index: 0;
                cursor: not-allowed;
                border-color: $radio-button-border-color-disabled;
                background-color: $radio-button-bg-color-disabled;

                #{$radio-prefix}-label {
                    color: $radio-button-font-color-disabled;
                }
            }

            &.checked.disabled {
                z-index: 0;
                border-color: $radio-button-border-color-checked-disabled;
                background-color: $radio-button-bg-color-checked-disabled;

                #{$radio-prefix}-label {
                    color: $radio-button-font-color-checked-disabled;
                }
            }
        }

        &-large {
            > label {
                padding: 0px 8px;
                height: $radio-button-height-large;
                line-height: $radio-button-height-large;
            }

            #{$radio-prefix}-label {
                height: $radio-button-height-large - 2;
                line-height: $radio-button-height-large - 2;
                font-size: $radio-button-font-size-large;
            }
        }

        &-medium {
            > label {
                padding: 0px 8px;
                height: $radio-button-height-medium;
                line-height: $radio-button-height-medium;
            }

            #{$radio-prefix}-label {
                height: $radio-button-height-medium - 2;
                line-height: $radio-button-height-medium - 2;
                font-size: $radio-button-font-size-medium;
            }
        }

        &-small {
            > label {
                padding: 0px 8px;
                height: $radio-button-height-small;
                line-height: $radio-button-height-small;
            }

            #{$radio-prefix}-label {
                height: $radio-button-height-small - 2;
                line-height: $radio-button-height-small - 2;
                font-size: $radio-button-font-size-small;
            }
        }
    }

    &-single-input {
        input[type="radio"] {
            opacity: 0;
            position: absolute;
            top: 0;
            left: 0;
            margin: 0;
        }
    }
}

#{$radio-prefix}-label {
    @include global-font;

    vertical-align: middle;
    margin: 0 5px;
    font-size: $radio-font-size;
}