@import "../lib.less";

.@{veui-prefix}-switch {
  .metrics(@size) {
    @width: ~"dls-switch-width-@{size}";
    @height: ~"dls-switch-height-@{size}";
    @thumb-size: ~"dls-switch-thumb-size-@{size}";
    @padding: ~"dls-switch-padding-@{size}";

    .@{veui-prefix}-switch {
      &-switcher {
        .size(@@width, @@height);
        padding: @@padding;
        border-radius: @@height / 2;
      }

      &-button {
        .size(@@thumb-size);

        .@{veui-prefix}-icon {
          .dls-icon-size(dls-sum(@@thumb-size, -2px));
        }
      }

      &-text {
        left: dls-sum(@@width / 2, @@height / 2, @@padding * -1);
      }
    }

    &.@{veui-prefix}-switch-on &-text {
      left: dls-sum(@@width / 2, @@height / -2, @@padding);
    }

    &.@{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 {
      transform: translateX(
        dls-sum(@@width, @@thumb-size * -1, @@padding * -2)
      );
    }

    &.@{veui-prefix}-switch-on.@{veui-prefix}-switch-loading
      .@{veui-prefix}-switch-button {
      transform: translateX(0);
    }
  }

  display: inline-flex;
  align-items: center;
  position: relative;
  cursor: pointer;
  outline: none;
  font-size: @dls-font-size-1;

  .metrics(m);

  input {
    position: absolute;
    opacity: 0;
  }

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

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

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

  &:hover &-switcher {
    background-color: @dls-switch-track-color-off-hover;

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

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

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

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

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

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

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

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

    .@{veui-prefix}-icon {
      position: absolute;
      color: @dls-switch-track-color-off;
    }
  }

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

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

      .@{veui-prefix}-icon {
        color: @dls-switch-track-color-on;
      }
    }
  }

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

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

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

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

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

  &-loading {
    pointer-events: none;
  }

  &-loading &-switcher {
    .@{veui-prefix}-icon {
      color: @dls-switch-track-color-off;
    }
  }

  &-on&-loading &-switcher {
    .@{veui-prefix}-icon {
      color: @dls-switch-track-color-on;
    }
  }

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

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

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

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

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

  &[ui~="xs"] {
    font-size: @dls-font-size-0;
    .metrics(xs);
  }

  &[ui~="s"] {
    font-size: @dls-font-size-0;
    .metrics(s);
  }

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

  // For backwards compatibility
  &-text {
    display: flex;
    height: 100%;
    align-items: center;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    color: @dls-foreground-color-reverse;

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