@import '../default/var';
.#{$prefix}-radio {
    display: inline-block;
    white-space: nowrap;
    line-height: 1;
    outline: 0;
    cursor: pointer;
    user-select: none;
    &+.#{$prefix}-radio {
        // margin-left: 20px;
    }
    &__label,
    &__input {
        display: inline-block;
        vertical-align: middle;
    }
    &__label {
        margin-left: 10px;
        color: $radio-color-fore;
    }
    &__input {
        width: 14px;
        height: 14px;
        border-radius: 50%;
        border: solid 1px $radio-color-border;
        position: relative;
        // box-sizing: border-box;
        &:after {
            content: "";
            display: block;
            width: 6px;
            height: 6px;
            border-radius: 100%;
            background-color: $radio-color-border-hover;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%) scale(0);
            transition: transform .05s ease-in;
        }
        &:hover:not(:is-disabled) {
            border-color: $radio-color-border-hover;
        }
        .native {
            display: none;
        }
    }
    &.is-checked {
        .#{$prefix}-radio {
            &__input {
                border-color: $radio-color-border-hover;
                &:after {
                    transform: translate(-50%, -50%) scale(1);
                }
            }
        }
    }
    &.is-disabled {
        cursor: not-allowed;
        .#{$prefix}-radio {
            &__label {
                color: $radio-color-disabled-fore;
            }
            &__input {
                background-color: $radio-color-disabled-back;
            }
        }
        &.is-checked {
            .#{$prefix}-radio {
                &__input {
                    border-color: $radio-color-border;
                    &:after {
                        transform: translate(-50%, -50%) scale(1);
                        background-color: $radio-color-border;
                    }
                }
                &__label {
                    color: $radio-color-disabled-fore;
                    cursor: not-allowed;
                }
            }
        }
    }
}