@import './var.less';
@import '../../style/mixins/index.less';

.@{radio-group-prefix-cls} {
    .reset-component();

    display: inline-block;
    font-size: 0;
    line-height: unset;

    .@{ant-prefix}-badge-count {
        z-index: 1;
    }

    >.@{ant-prefix}-badge:not(:first-child)>.@{radio-prefix-cls}-button-wrapper {
        border-left: none;
    }
}

// 一般状态
.@{radio-prefix-cls}-wrapper {
    .reset-component();
    position: relative;
    display: inline-flex;
    align-items: baseline;
    margin-right: @radio-wrapper-margin-right;
    cursor: pointer;

    &::after {
        display: inline-block;
        width: 0;
        overflow: hidden;
        content: '\a0';
    }
}

.@{radio-prefix-cls} {
    .reset-component();

    position: relative;
    top: @radio-top;
    display: inline-block;
    outline: none;
    cursor: pointer;

    .@{radio-prefix-cls}-wrapper:hover &,
    &:hover .@{radio-inner-prefix-cls},
    &-input:focus+.@{radio-inner-prefix-cls} {
        border-color: @radio-dot-color;
    }

    &-input:focus+.@{radio-inner-prefix-cls} {
        box-shadow: @radio-focus-shadow;
    }

    &-checked::after {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 1*@hd solid @radio-dot-color;
        border-radius: 50%;
        visibility: hidden;
        animation: antRadioEffect 0.36s ease-in-out;
        animation-fill-mode: both;
        content: '';
    }

    &:hover::after,
    .@{radio-prefix-cls}-wrapper:hover &::after {
        visibility: visible;
    }

    &-inner {
        &::after {
            position: absolute;
            top: ((@radio-size - @radio-dot-size) / 2) - @radio-border-width;
            left: ((@radio-size - @radio-dot-size) / 2) - @radio-border-width;
            display: block;
            width: @radio-dot-size;
            height: @radio-dot-size;
            background-color: @radio-dot-color;
            border-top: 0;
            border-left: 0;
            border-radius: @radio-dot-size;
            transform: scale(0);
            opacity: 0;
            transition: all @radio-duration @ease-in-out-circ;
            content: ' ';
        }

        position: relative;
        top: 0;
        left: 0;
        display: block;
        width: @radio-size;
        height: @radio-size;
        background-color: @radio-button-bg;
        border-color: @border-color-base;
        border-style: solid;
        border-width: @radio-border-width;
        border-radius: 50%;
        transition: all @radio-duration;
    }

    &-input {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1;
        cursor: pointer;
        opacity: 0;
    }
}

// 选中状态
.@{radio-prefix-cls}-checked {
    .@{radio-inner-prefix-cls} {
        border-color: @radio-dot-color;

        &::after {
            transform: scale(1);
            opacity: 1;
            transition: all @radio-duration @ease-in-out-circ;
        }
    }
}

.@{radio-prefix-cls}-disabled {
    cursor: not-allowed;

    .@{radio-inner-prefix-cls} {
        background-color: @input-disabled-bg;
        border-color: @border-color-base  !important;
        cursor: not-allowed;

        &::after {
            background-color: @radio-dot-disabled-color;
        }
    }

    .@{radio-prefix-cls}-input {
        cursor: not-allowed;
    }

    &+span {
        color: @disabled-color;
        cursor: not-allowed;
    }
}

span.@{radio-prefix-cls}+* {
    padding-right: 8*@hd;
    padding-left: 8*@hd;
}

.@{radio-prefix-cls}-button-wrapper {
    position: relative;
    display: inline-block;
    height: @btn-height-base;
    margin: 0;
    padding: 0 @padding-md - 1*@hd;
    color: @radio-button-color;
    font-size: @font-size-base;
    line-height: @btn-height-base - 2*@hd;
    background: @radio-button-bg;
    border: @border-width-base @border-style-base @border-color-base;
    border-top-width: @border-width-base + 0.02*@hd;
    border-left-width: 0;
    cursor: pointer;
    transition: color 0.3s, background 0.3s, border-color 0.3s, box-shadow 0.3s;

    a {
        color: @radio-button-color;
    }

    >.@{radio-prefix-cls}-button {
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        width: 100%;
        height: 100%;
    }

    .@{radio-group-prefix-cls}-large & {
        height: @input-height-lg;
        font-size: @font-size-lg;
        line-height: @input-height-lg - 2*@hd;
    }

    .@{radio-group-prefix-cls}-small & {
        height: @input-height-sm;
        padding: 0 @control-padding-horizontal-sm - 1*@hd;
        line-height: @input-height-sm - 2*@hd;
    }

    &:not(:first-child) {
        &::before {
            position: absolute;
            top: @border-width-base * -1;
            left: -1*@hd;
            display: block;
            box-sizing: content-box;
            width: 1*@hd;
            height: 100%;
            padding: @border-width-base 0;
            background-color: @border-color-base;
            transition: background-color 0.3s;
            content: '';
        }
    }

    &:first-child {
        border-left: @border-width-base @border-style-base @border-color-base;
        border-radius: @border-radius-base 0 0 @border-radius-base;
    }

    &:last-child {
        border-radius: 0 @border-radius-base @border-radius-base 0;
    }

    &:first-child:last-child {
        border-radius: @border-radius-base;
    }

    &:hover {
        position: relative;
        color: @radio-dot-color;
    }

    &:focus-within {
        box-shadow: @radio-button-focus-shadow;
    }

    .@{radio-prefix-cls}-inner,
    input[type='checkbox'],
    input[type='radio'] {
        width: 0;
        height: 0;
        opacity: 0;
        pointer-events: none;
    }

    &-checked:not(&-disabled) {
        z-index: 1;
        color: @radio-dot-color;
        background: @radio-button-checked-bg;
        border-color: @radio-dot-color;

        &::before {
            background-color: @radio-dot-color;
        }

        &:first-child {
            border-color: @radio-dot-color;
        }

        &:hover {
            color: @radio-button-hover-color;
            border-color: @radio-button-hover-color;

            &::before {
                background-color: @radio-button-hover-color;
            }
        }

        &:active {
            color: @radio-button-active-color;
            border-color: @radio-button-active-color;

            &::before {
                background-color: @radio-button-active-color;
            }
        }

        &:focus-within {
            box-shadow: @radio-button-focus-shadow;
        }
    }

    .@{radio-group-prefix-cls}-solid &-checked:not(&-disabled) {
        color: @radio-solid-checked-color;
        background: @radio-dot-color;
        border-color: @radio-dot-color;

        &:hover {
            color: @radio-solid-checked-color;
            background: @radio-button-hover-color;
            border-color: @radio-button-hover-color;
        }

        &:active {
            color: @radio-solid-checked-color;
            background: @radio-button-active-color;
            border-color: @radio-button-active-color;
        }

        &:focus-within {
            box-shadow: @radio-button-focus-shadow;
        }
    }

    &-disabled {
        color: @disabled-color;
        background-color: @input-disabled-bg;
        border-color: @border-color-base;
        cursor: not-allowed;

        &:first-child,
        &:hover {
            color: @disabled-color;
            background-color: @input-disabled-bg;
            border-color: @border-color-base;
        }

        &:first-child {
            border-left-color: @border-color-base;
        }
    }

    &-disabled&-checked {
        color: @radio-disabled-button-checked-color;
        background-color: @radio-disabled-button-checked-bg;
        border-color: @border-color-base;
        box-shadow: none;
    }
}

.@{radio-group-prefix-cls}.@{radio-group-prefix-cls}-stereoscopic {
    display: flex;
    width: 100%;
    height: 32*@hd;
    padding: 2*@hd;
    opacity: 1;
    border-width: 0;
    border-radius: 6*@hd;
    background-color: #f4f4f4;

    .@{radio-prefix-cls}-button-wrapper {
        flex: 1;
        text-align: center;
        height: 28*@hd;
        border-width: 0;
        border-radius: 5*@hd;
        background-color: #f4f4f4;
        line-height: 28*@hd;


        &>span:not(.@{radio-prefix-cls}-button) {
            font-size: 14*@hd;
            font-family: PingFang SC, PingFang SC-Regular;
            font-weight: 400;
            text-align: center;
            color: rgba(0, 0, 0, 0.65);
        }

        &.@{radio-prefix-cls}-button-wrapper-checked {
            background: #ffffff;
            border: 1*@hd solid #fff;
            font-family: PingFang SC, PingFang SC-Medium;
            box-shadow: 0 2*@hd 4*@hd 0 rgba(0, 0, 0, 0.16);

            &>span:not(.@{radio-prefix-cls}-button) {
                font-weight: 500;
            }
        }

        &:not(:first-child):before {
            width: 0;
        }

        &.@{radio-prefix-cls}-button-wrapper.@{radio-prefix-cls}-button-wrapper-checked:not(.@{radio-prefix-cls}-button-wrapper-disabled):first-child {
            border-width: 0;
        }
    }
}

@keyframes antRadioEffect {
    0% {
        transform: scale(1);
        opacity: 0.5;
    }

    100% {
        transform: scale(1.6);
        opacity: 0;
    }
}

@import './rtl';
