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

@include b(switch) {
  background-color: transparent;
  &:focus {
    box-shadow: 0px 0px 0px 4px rgba(100, 180, 250, 0.3), 0px 0px 0px 2px getCssVarWebex('control', 'active', 'normal');
  }
  //&:hover {
  //  background-color: getCssVarWebex('control', 'inactive', 'hover');
  //}
  @include e(core) {
    background-color: getCssVarWebex('control', 'inactive', 'normal');
    border-color: getCssVarWebex('control', 'inactive', 'normal');
    color: getCssVarWebex('text', 'primary', 'normal');
    .el-switch__button {
      background-color: getCssVarWebex('text', 'inverted', 'normal');
      color: getCssVarWebex('text', 'primary', 'normal');
    }
  }
  &.is-checked {
    .el-switch__core {
      background-color: getCssVarWebex('control', 'active', 'normal');
      border-color: getCssVarWebex('control', 'active', 'normal');
      color: getCssVarWebex('text', 'accent', 'normal');
      &:hover {
        background-color: getCssVarWebex('control', 'active', 'hover');
      }
    }
    .el-switch__button {
      background-color: getCssVarWebex('background', 'solid', 'primary', 'normal');
      color: getCssVarWebex('text', 'accent', 'normal');
    }
  }
  &.is-disabled.is-checked {
  .el-switch__core {
    border-color: getCssVarWebex('control', 'active', 'disabled') !important;
    background-color: getCssVarWebex('control', 'active', 'disabled') !important;
    & span {
      background-color: getCssVarWebex('background', 'solid', 'primary', 'normal')!important;
      color: getCssVarWebex('text', 'highlight')!important;
    }
    & ~ .el-switch__label * {
    color: getCssVarWebex('text', 'primary', 'disabled')!important;
    }
  }

}
  &.is-disabled {
    .el-switch__core {
      border-color: getCssVarWebex('control', 'inactive', 'disabled') !important;
      background-color: getCssVarWebex('control', 'inactive', 'disabled') !important;

      & span {
        background-color: getCssVarWebex('text', 'primary', 'disabled') !important;
        color: getCssVarWebex('text', 'inverted', 'disabled') !important;
      }

      & ~ .el-switch__label * {
        color: getCssVarWebex('text', 'primary', 'disabled') !important;
      }
    }
  }
}
