@use 'libs/components/theme/src/lib/styles/mixins' as mixins;
@use 'libs/components/theme/src/lib/styles/variables' as *;
@use 'libs/components/theme/src/lib/styles/compat-tokens-mixins' as compatMixins;

@include compatMixins.sky-default-overrides('.sky-toggle-switch') {
  --sky-override-toggle-switch-background-color: #{$sky-background-color-neutral-light};
  --sky-override-toggle-switch-background-color-disabled: #{$sky-background-color-disabled};
  --sky-override-toggle-switch-background-color-selected: #{$sky-background-color-info-light};
  --sky-override-toggle-switch-border: 1px solid #{$sky-border-color-neutral-medium};
  --sky-override-toggle-switch-border-color-active: #{$sky-border-color-neutral-medium};
  --sky-override-toggle-switch-border-color-disabled: transparent;
  --sky-override-toggle-switch-border-color-focus: #{$sky-theme-modern-background-color-primary-dark};
  --sky-override-toggle-switch-border-color-hover: #{$sky-highlight-color-info};
  --sky-override-toggle-switch-border-color-selected: #{$sky-highlight-color-info};
  --sky-override-toggle-switch-border-radius: 24px;
  --sky-override-toggle-switch-border-width: 1px;
  --sky-override-toggle-switch-border-width-active: 1px;
  --sky-override-toggle-switch-border-width-disabled: 2px;
  --sky-override-toggle-switch-border-width-focus: 2px;
  --sky-override-toggle-switch-border-width-hover: 2px;
  --sky-override-toggle-switch-border-width-selected: 2px;
  --sky-override-toggle-switch-box-shadow-focus: none;
  --sky-override-toggle-switch-indicator-background-color: #{$sky-color-white};
  --sky-override-toggle-switch-indicator-background-color-disabled: #{$sky-background-color-neutral-light};
  --sky-override-toggle-switch-indicator-border-radius: 100%;
  --sky-override-toggle-switch-indicator-box-shadow: 0px 1px 2px 0px
    rgba(0, 0, 0, 0.75);
  --sky-override-toggle-switch-indicator-height: 22px;
  --sky-override-toggle-switch-indicator-left: 22px;
  --sky-override-toggle-switch-indicator-margin-left: -22px;
  --sky-override-toggle-switch-indicator-width: 22px;
  --sky-override-toggle-switch-label-gap: #{$sky-margin};
  --sky-override-toggle-switch-line-height: calc(20 / 14);
  --sky-override-toggle-switch-padding: 1px;
  --sky-override-toggle-switch-padding-active: 1px;
  --sky-override-toggle-switch-padding-disabled: 0;
  --sky-override-toggle-switch-padding-focus: 0;
  --sky-override-toggle-switch-padding-hover: 0;
  --sky-override-toggle-switch-padding-selected: 0;
  --sky-override-toggle-switch-pointer-disabled: default;
  --sky-override-toggle-switch-transition: none;
  --sky-override-toggle-switch-width: 46px;
}

@include compatMixins.sky-modern-overrides('.sky-toggle-switch') {
  --sky-override-toggle-switch-background-color: var(--modern-color-white);
  --sky-override-toggle-switch-indicator-box-shadow: 0px 1px 2px 0px
    rgba(0, 0, 0, 0.5);
  --sky-override-toggle-switch-line-height: calc(20 / 14);
  --sky-override-toggle-switch-width: var(--modern-size-48);
}

.sky-toggle-switch {
  display: inline-flex;
  align-items: baseline;

  &.sky-toggle-switch-with-label {
    gap: var(
      --sky-override-toggle-switch-label-gap,
      var(--sky-space-gap-label-m)
    );
  }

  .sky-toggle-switch-button {
    border: none;
    background: none;
    margin: 0;
    padding: 0;
    outline: none;

    .sky-toggle-switch-switch {
      border: var(
        --sky-override-toggle-switch-border,
        var(--sky-border-width-input-base) solid
          var(--sky-color-border-input-base)
      );
      background-color: var(
        --sky-override-toggle-switch-background-color,
        var(--sky-background-input-base)
      );
      padding: var(
        --sky-override-toggle-switch-padding,
        var(--sky-border-width-input-base)
      );
      border-radius: var(
        --sky-override-toggle-switch-border-radius,
        calc(
            var(--sky-border-radius-thumb) +
              calc(var(--sky-space-inset-thumb) * 2)
          ) / 100%
      );
      flex: none;
      line-height: var(
        --sky-override-toggle-switch-line-height,
        calc(
          var(--sky-size-switch) - calc(
              calc(var(--sky-border-width-input-base) * 2) +
                calc(var(--sky-space-inset-thumb) * 2)
            )
        )
      );
      width: var(
        --sky-override-toggle-switch-width,
        calc(
          calc(var(--sky-size-switch) * 2) - calc(
              calc(var(--sky-border-width-input-base) * 2) +
                calc(var(--sky-space-inset-thumb) * 2)
            )
        )
      );
      display: inline-block;
      transition: var(
        --sky-override-toggle-switch-transition,
        border-color $sky-transition-time-short,
        box-shadow $sky-transition-time-short
      );
    }

    &:focus-visible .sky-toggle-switch-switch {
      border-width: var(
        --sky-override-toggle-switch-border-width-focus,
        var(--sky-border-width-input-focus)
      );
      border-color: var(
        --sky-override-toggle-switch-border-color-focus,
        var(--sky-color-border-input-focus)
      );
      padding: var(
        --sky-override-toggle-switch-padding-focus,
        calc(
          calc(var(--sky-space-inset-thumb) * 2) - var(
              --sky-border-width-input-focus
            )
        )
      );
    }

    &:focus-visible:not(:active, .sky-toggle-switch-disabled)
      .sky-toggle-switch-switch {
      box-shadow: var(
        --sky-override-toggle-switch-box-shadow-focus,
        var(--sky-elevation-focus)
      );
    }

    &:active .sky-toggle-switch-switch {
      border-width: var(
        --sky-override-toggle-switch-border-width-active,
        var(--sky-border-width-input-active)
      );
      border-color: var(
        --sky-override-toggle-switch-border-color-active,
        var(--sky-color-border-input-active)
      );
      padding: var(
        --sky-override-toggle-switch-padding-active,
        calc(
          calc(var(--sky-space-inset-thumb) * 2) - var(
              --sky-border-width-input-active
            )
        )
      );
    }

    &:hover:not(.sky-toggle-switch-disabled) {
      cursor: pointer;

      &:not(:focus-visible) .sky-toggle-switch-switch {
        border-width: var(
          --sky-override-toggle-switch-border-width-hover,
          var(--sky-border-width-input-hover)
        );
        border-color: var(
          --sky-override-toggle-switch-border-color-hover,
          var(--sky-color-border-input-hover)
        );
        padding: var(
          --sky-override-toggle-switch-padding-hover,
          calc(
            calc(var(--sky-space-inset-thumb) * 2) - var(
                --sky-border-width-input-base
              )
          )
        );
      }
    }

    &.sky-toggle-switch-checked {
      .sky-toggle-switch-switch {
        background-color: var(
          --sky-override-toggle-switch-background-color-selected,
          var(--sky-color-background-selected-heavy)
        );
      }

      &:not(:focus-visible, :active, .sky-toggle-switch-disabled)
        .sky-toggle-switch-switch {
        border-width: var(
          --sky-override-toggle-switch-border-width-selected,
          var(--sky-border-width-selected-s)
        );
        border-color: var(
          --sky-override-toggle-switch-border-color-selected,
          var(--sky-color-border-selected)
        );
        padding: var(
          --sky-override-toggle-switch-padding-selected,
          calc(
            calc(var(--sky-space-inset-thumb) * 2) - var(
                --sky-border-width-input-base
              )
          )
        );
      }

      .sky-toggle-switch-indicator {
        left: 100%;
      }
    }

    &.sky-toggle-switch-disabled {
      color: var(--sky-color-text-default);

      .sky-toggle-switch-switch {
        background-color: var(
          --sky-override-toggle-switch-background-color-disabled,
          var(--sky-color-background-input-disabled)
        );
        border-color: var(
          --sky-override-toggle-switch-border-color-disabled,
          var(--sky-color-border-input-disabled)
        );
        border-width: var(
          --sky-override-toggle-switch-border-width-disabled,
          var(--sky-border-width-input-disabled)
        );
        padding: var(
          --sky-override-toggle-switch-padding-disabled,
          calc(
            calc(var(--sky-space-inset-thumb) * 2) - var(
                --sky-border-width-input-disabled
              )
          )
        );
        cursor: var(--sky-override-toggle-switch-pointer-disabled, not-allowed);
      }

      .sky-toggle-switch-indicator {
        background-color: var(
          --sky-override-toggle-switch-indicator-background-color-disabled,
          var(--sky-color-background-thumb-disabled)
        );
      }
    }

    .sky-toggle-switch-indicator {
      height: var(
        --sky-override-toggle-switch-indicator-height,
        calc(
          var(--sky-size-switch) - calc(
              calc(var(--sky-border-width-input-base) * 2) +
                calc(var(--sky-space-inset-thumb) * 2)
            )
        )
      );
      width: var(
        --sky-override-toggle-switch-indicator-width,
        calc(
          var(--sky-size-switch) - calc(
              calc(var(--sky-border-width-input-base) * 2) +
                calc(var(--sky-space-inset-thumb) * 2)
            )
        )
      );
      display: block;
      position: relative;
      top: 0;
      left: var(
        --sky-override-toggle-switch-indicator-left,
        calc(
          var(--sky-size-switch) - calc(
              calc(var(--sky-border-width-input-base) * 2) +
                calc(var(--sky-space-inset-thumb) * 2)
            )
        )
      );
      margin-left: var(
        --sky-override-toggle-switch-indicator-margin-left,
        calc(
          calc(
              var(--sky-size-switch) - calc(
                  calc(var(--sky-border-width-input-base) * 2) +
                    calc(var(--sky-space-inset-thumb) * 2)
                )
            ) * -1
        )
      );
      border-radius: var(
        --sky-override-toggle-switch-indicator-border-radius,
        var(--sky-border-radius-thumb)
      );
      box-shadow: var(
        --sky-override-toggle-switch-indicator-box-shadow,
        var(--sky-elevation-raised-100)
      );
      background-color: var(
        --sky-override-toggle-switch-indicator-background-color,
        var(--sky-color-background-thumb-base)
      );

      &.sky-toggle-switch-transition {
        transition: left 150ms;
      }
    }
  }
}
