@import "./base/var";
@import "./mixins/index.scss";

@mixin radioSize($size) {
    $font-size: $--font-size-default;
    $height: $--radio-input-height-default;

    @if ($size == 'mini') {
        $font-size: $--font-size-mini;
        $height: $--radio-input-height-mini;
    } @else if ($size == 'small') {
        $font-size: $--font-size-small;
        $height: $--radio-input-height-small;
    } @else if ($size == 'large') {
        $font-size: $--font-size-large;
        $height: $--radio-input-height-large;
    }


    @include e(inner, false) {
        width: $height;
        height: $height;
    }
    @include e(label, false) {
        font-size: $font-size;
    }
    &.is-checked {
        @include e(inner, false) {
            &::after {
                width: #{$height / 2};
                height: #{$height / 2};
            }
        }
    }
}

@include c(radio) {
    color: $--color-text-default;
    display: inline-block;
    position: relative;
    transition: all $--animation-time ease-in-out;
    margin-right: 20px;
    vertical-align: middle;

    @include e(input) {
        display: inline-block;
        line-height: normal;
        vertical-align: middle;
        font-size: 0;
    }

    @include e(label) {
        display: inline-block;
        margin-left: 5px;
        cursor: pointer;
        vertical-align: middle;
    }

    @include e(inner) {
        border-radius: 50%;
        border: $--radio-border;
        background-color: $--radio-background-color;
        display: inline-block;
        position: relative;
        cursor: pointer;
        vertical-align: middle;
        transition: border-color $--animation-time ease-in-out;

        &:hover {
            border-color: $--radio-border-color-hover;
        }

        &::after {
            content: '';
            width: 0;
            height: 0;
            background-color: $--color-white;
            border-radius: 50%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    }


    @include when(disabled) {
        cursor: not-allowed;
        color: $--radio-font-color-disabled;

        @include e(label, false) {
            cursor: not-allowed;
        }

        @include e(inner, false) {
            cursor: not-allowed;
            background-color: $--radio-background-color-disabled;
            border-color: $--radio-border-color-disabled;

            &::after {
                cursor: not-allowed;
                background: $--radio-icon-color-disabled;
            }
        }
    }

    @include when(checked) {
        color: $--radio-font-color-checked;
        @include e(inner, false) {
            background-color: $--radio-background-color-checked;
            border-color: $--radio-border-color-checked;
        }
    }

    &.is-disabled.is-checked {
        color: $--radio-font-color-disabled;
        @include e(inner, false) {
            cursor: not-allowed;
            background-color: $--radio-background-color-disabled;
            border-color: $--radio-border-color-disabled;

            &::after {
                cursor: not-allowed;
                background: $--radio-icon-color-disabled;
            }
        }
    }

    @include m(mini) {
        @include radioSize(mini);
    }

    @include m(small) {
        @include radioSize(small);
    }

    @include m(default) {
        @include radioSize(default);
    }

    @include m(large) {
        @include radioSize(large);
    }
}


@include c(radio-group) {
    display: inline-block;
    vertical-align: middle;
}
