@import "mixins/mixins";
@import "common/var";

@include b(switch-enhance) {
  .square {
    .el-switch__core {
      border-radius: 4px;
    }

    .el-switch__core::after {
      border-radius: 4px;
    }
  }

  .inline-text {
    .el-switch__label {
      position: absolute;
      margin: 0;
      opacity: 0;
      visibility: hidden;

      & span {
        font-size: 12px;
      }
    }

    .el-switch__label.is-active {
      color: $--color-white;
      z-index: 1;
      opacity: 1;
      visibility: visible;
    }

    .el-switch__label--left {
      right: 6px;
    }

    .el-switch__label--right {
      left: 6px;
    }

    &:not(.is-checked) .el-switch__core {
      background-color: #A7A8AD;
      border-color: #A7A8AD;
    }
  }
}