@import "../lib.less";
@import "../variables/components/switch.less";

.@{veui-prefix}-switch {
  .metrics(@size, @fontSize: s) {
    @width: ~"veui-switch-width-@{size}";
    @height: ~"veui-switch-height-@{size}";
    @thumb-size: ~"veui-switch-thumb-size-@{size}";
    @padding: ~"veui-switch-padding-@{size}";
    @font-size: ~"veui-font-size-@{fontSize}";
    @text-offset: veui-sum(@@height / 2, @@thumb-size / 2, @veui-padding-unit);
    @offset: @@thumb-size + @veui-padding-unit + @@padding;
 
    .@{veui-prefix}-switch {
      font-size: @@font-size;
      &-switcher {
        min-width: @@width;
        height: @@height;
        border-radius: @@height / 2;
      }

      &-button {
        .size(@@thumb-size);
        left: @@padding;
      }

      &-text {
        margin: 0 @veui-padding-unit * 2 0 @offset
      }
    }

    &.@{veui-prefix}-switch-on .veui-switch-text {
      margin: 0 @offset 0 @veui-padding-unit * 2
    }

    &.@{veui-prefix}-switch-loading .@{veui-prefix}-switch-button,
    &.@{veui-prefix}-switch-on:not(.@{veui-prefix}-switch-loading)
      > .@{veui-prefix}-switch-switcher
      > .@{veui-prefix}-switch-button {
      left: calc(~"100% - @{@{thumb-size}} - @{@{padding}}");
    }

    &.@{veui-prefix}-switch-on.@{veui-prefix}-switch-loading
      .@{veui-prefix}-switch-button {
      left: @@padding;
    }
  }
  
  display: inline-flex;
  align-items: center;
  position: relative;
  cursor: pointer;
  outline: none;
  font-size: @veui-font-size-s;

  .metrics(s, s);
  input {
    position: absolute;
    opacity: 0;
  }

  &-switcher,
  &-label {
    display: inline-flex;
    align-items: center;
  }

  &-label {
    margin-left: @veui-padding-unit * 2;
    line-height: 1;
  }

  &-switcher {
    position: relative;
    background-color: @veui-switch-track-color-off;
    user-select: none;
    .veui-transition(background-color, box-shadow);
  }

  &-text {
    display: flex;
    height: 100%;
    align-items: center;
    font-size: @veui-font-size-s;
    color: @veui-switch-font-color;

    .@{veui-prefix}-icon {
      .veui-icon-size(@veui-icon-size-aux);
    }
  }

  // first, set `checked = false` style, then `:checked = true`
  &:hover &-switcher {
    background-color: @veui-switch-track-color-off-hover;

    .@{veui-prefix}-switch-button {
      background-color: @veui-switch-thumb-color-off-hover;
    }
  }

  &:active &-switcher {
    background-color: @veui-switch-track-color-off-active;

    .@{veui-prefix}-switch-button {
      background-color: @veui-switch-thumb-color-off-active;
    }
  }

  .focus-visible + &-switcher {
    background-color: @veui-switch-track-color-off-focus;
    box-shadow: @veui-switch-shadow-on-focus;

    .@{veui-prefix}-switch-button {
      background-color: @veui-switch-thumb-color-off-focus;
    }
  }

  &-button {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: @veui-switch-thumb-color-off;
    border-radius: 50%;
    position: absolute;
    .veui-transition(left);

    .@{veui-prefix}-loading-spinner {
      color: @veui-switch-circle-off;
    }
  }

  &-text {
    .veui-transition(margin);
  }

  :checked + &-switcher {
    background-color: @veui-switch-track-color-on;

    .@{veui-prefix}-switch-button {
      background-color: @veui-switch-thumb-color-on;

      .@{veui-prefix}-loading-spinner {
        color: @veui-switch-circle-on;
      }
    }
  }

  &:hover :checked + &-switcher {
    background-color: @veui-switch-track-color-on-hover;

    .@{veui-prefix}-switch-button {
      background-color: @veui-switch-thumb-color-on-hover;
    }
  }

  &:active :checked + &-switcher {
    background-color: @veui-switch-track-color-on-active;

    .@{veui-prefix}-switch-button {
      background-color: @veui-switch-thumb-color-on-active;
    }
  }

  .focus-visible:checked + &-switcher {
    background-color: @veui-switch-track-color-on-focus;
    box-shadow: @veui-switch-shadow-on-focus;

    .@{veui-prefix}-switch-button {
      background-color: @veui-switch-thumb-color-on-focus;
    }
  }

  &.@{veui-prefix}-readonly {
    cursor: default;
  }

  &-loading {
    pointer-events: none;
  }

  &.@{veui-prefix}-disabled {
    cursor: not-allowed;
  }

  &-on&-loading,
  &-on.@{veui-prefix}-readonly,
  &-on.@{veui-prefix}-disabled {
    .@{veui-prefix}-switch-switcher,
    &:hover .@{veui-prefix}-switch-switcher {
      background-color: @veui-switch-track-color-off-disabled;
      .@{veui-prefix}-switch-button {
        background-color: @veui-switch-thumb-color-off-disabled;
      }
    }
  }

  &-on&-loading &-switcher,
  &-on.@{veui-prefix}-readonly &-switcher,
  &-on.@{veui-prefix}-disabled &-switcher {
    background-color: @veui-switch-track-color-on-disabled;

    .@{veui-prefix}-switch-button {
      background-color: @veui-switch-thumb-color-on-disabled;
    }
  }

  &[ui~="xs"] &-text,
  &[ui~="s"] &-text {
    display: none;
  }

  &[ui="xs"] {
    font-size: @veui-font-size-s;
    .metrics(xs, s);
  }

  &[ui="m"] {
    font-size: @veui-font-size-m;
    .metrics(m, m);
  }
}