@import "../mixins/mixins";
@import "../mixins/typo";
@import "../mixins/utils";
@import "../config/variables";

@include b(switch) {
  display: inline-flex;
  align-items: center;
  position: relative;
  vertical-align: middle;

  @include e(input) {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    margin: 0;
    &:focus ~ .el-switch__core {
      outline: none;
    }
  }

  @include e(core) {
    display: inline-block;
    position: relative;
    width: 36px;
    height: 20px;
    margin: 2px;
    border-radius: 10px;
    box-shadow: inset 0 0 0 1px $--color-primary;
    outline: none;
    box-sizing: border-box;
    background: $--color-white;
    cursor: pointer;
    transition: box-shadow .3s, background .3s;
    vertical-align: middle;

    &:after {
      content: "";
      position: absolute;
      width: 10px;
      height: 10px;
      top: 4px;
      left: 4px;
      border-radius: 12px;
      transition: all .3s;
      background-color: $--color-white;
      border: 1px solid $--color-primary;
    }
    &:active {
      & {
        box-shadow: inset 0 0 0 1px $--color-focus;
      }
      &:after {
        border-color: $--color-focus;
      }
    }
  }
  @include when(hovered) {
    @include e(core) {
      box-shadow: inset 0 0 0 1px $--color-dark;
      &:after {
        border-color: $--color-dark;
      }
    }
    @include when(checked) {
      @include e(core) {
        background: $--color-dark;
        &:after {
          border-color: $--color-dark;
        }
      }
    }
  }

  @include m(bordered) {
    box-shadow: inset 0 0 0 1px $--color-silver;
    padding: $--size-base * 4 - 2 $--size-base * 4;
    border-radius: $--border-radius;
    cursor: pointer;
    background: $--color-white;
    @include e(label) {
      @include bodyL;
      padding-right: $--size-base * 4;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      width: calc(100% - 56px);
      color: $--color-text;
      @include utils-user-select(none);
    }
    &:hover {
      box-shadow: inset 0 0 0 1px $--color-grey;
    }
    &:active {
      box-shadow: inset 0 0 0 1px $--color-focus;
      @include e(core) {
        & {
          box-shadow: inset 0 0 0 1px $--color-focus;
        }
        &:after {
          border-color: $--color-focus;
        }
      }
    }
    @include e(core) {
      background: transparent;
    }
  }

  @include when(checked) {
    @include e(core) {
      background: $--color-primary;
      box-shadow: none;
      &:after {
        right: 4px;
        left: 100%;
        margin-left: - 12px - 4px;
        box-shadow: 0 2px 4px 0 $--color-focus;
      }
      &:active {
        background: $--color-focus;
        &:after {
          border-color: $--color-focus;
        }
      }
    }
    &:active {
      @include e(core) {
        background: $--color-focus;
        &:after {
          border-color: $--color-focus;
        }
      }
    }
  }

  @include when(disabled) {
    cursor: not-allowed;
    @include e(core) {
      cursor: not-allowed;
      & {
        box-shadow: inset 0 0 0 1px $--color-disabled;
      }
      &:after {
        border-color: $--color-disabled;
      }
    }
    @include when(checked) {
      @include e(core) {
        background: $--color-disabled;
        &:after {
          box-shadow: none;
          border-color: $--color-disabled;
        }
      }
    }
  }
}