@use 'mixins/mixins' as *;
@use 'mixins/utils' as *;

@include b(radio) {
  color: getCssVarWebex('text', 'primary', 'normal');
  @include e(inner) {
    border-color: getCssVarWebex('outline', 'input', 'normal');
    background-color: getCssVarWebex('control', 'inactive', 'normal');
    &::after {
      background-color: getCssVarWebex('text', 'inverted', 'normal');
    }
    &:hover {
      background-color: getCssVarWebex('control', 'inactive', 'hover');
      border-color: getCssVarWebex('control', 'inactive', 'hover');
    }
    &:active {
      background-color: getCssVarWebex('control', 'inactive', 'pressed');
      border-color: getCssVarWebex('control', 'inactive', 'pressed');
    }
  }
  @include e(input) {
    &.is-focus {
      .el-radio__inner {
        background-color: getCssVarWebex('background', 'primary', 'ghost');
        border-color: getCssVarWebex('outline', 'input', 'normal');
        outline: none;
        box-shadow: 0px 0px 0px 4px rgba(100, 180, 250, 0.3), 0px 0px 0px 2px getCssVarWebex('teaching', 'outline', 'theme');
      }
    }
    &.is-checked {
      .el-radio__inner {
        background-color: getCssVarWebex('control', 'active', 'normal');
        border-color: getCssVarWebex('control', 'active', 'normal');
        &:hover{
          background-color: getCssVarWebex('control', 'active', 'hover');
          border-color: getCssVarWebex('control', 'active', 'hover');
        }
        &:active{
          background-color: getCssVarWebex('control', 'active', 'pressed');
          border-color: getCssVarWebex('control', 'active', 'pressed');
        }
      }
      &.is-focus {
        .el-radio__inner {
          background-color: getCssVarWebex('control', 'active', 'normal');
          border-color: getCssVarWebex('control', 'active', 'normal');
        }
      };
    }
    &.is-disabled{
      .el-radio__inner {
        background-color: getCssVarWebex('control', 'inactive', 'disabled');
        &:hover{
          background-color: getCssVarWebex('control', 'inactive', 'disabled');
        }
      }
      & + .el-radio__label {
        color: getCssVarWebex('text', 'primary', 'disabled');
      }
      &.is-checked {
        .el-radio__inner {
          background-color: getCssVarWebex('control', 'active', 'disabled');
          border-color: getCssVarWebex('control', 'active', 'disabled');
          &::after {
            background-color: getCssVarWebex('text', 'inverted', 'normal');
          }
          &:hover{
            background-color: getCssVarWebex('control', 'active', 'disabled');
            border-color: getCssVarWebex('control', 'active', 'disabled');
          }
        }
      }
    }
    &.is-indeterminate {
      .el-radio__inner {
        background-color: getCssVarWebex('control', 'active', 'normal');
        border-color: getCssVarWebex('control', 'active', 'normal');
        &:before {
          background-color: getCssVarWebex('text', 'inverted', 'normal');
          border-color: getCssVarWebex('text', 'inverted', 'normal');
        }
      }
    }
  }
}

.el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: getCssVarWebex('control', 'active', 'normal');
  border-color: getCssVarWebex('control', 'active', 'normal');
}
.el-checkbox__input.is-checked .el-checkbox__inner:hover{
  background-color: getCssVarWebex('control', 'active', 'hover');
  border-color: getCssVarWebex('control', 'active', 'hover');
}
.el-checkbox__input.is-checked.is-focus .el-checkbox__inner {
  background-color: getCssVarWebex('control', 'active', 'normal');
  border-color: getCssVarWebex('control', 'active', 'normal');
}
.el-checkbox__input.is-checked:active .el-checkbox__inner {
  background-color: getCssVarWebex('control', 'active', 'pressed');
  border-color: getCssVarWebex('control', 'active', 'pressed');
}
