@use "../../foundations/helpers/forward.helpers.scss" as *;
@use "../icon-sprite/icon-sprite.scss";
@use "../spinner/spinner.scss" as *;

$ds-text-btn-toggle__underline-offset: 2px;
$ds-text-btn-toggle__icon-size: 24px;

@mixin ds-text-btn-toggle-disabled() {
  cursor: not-allowed;
  &::before {
    background-color: unset;
  }
  .ds-icon {
    color: $ds-color-text-primary-disabled;
  }
  .ds-text-btn-toggle__text {
    color: $ds-color-text-primary-disabled;
  }
}

.ds-text-btn-toggle {
  cursor: pointer;
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  border-radius: ds-border-radius(012);
  padding: 0;
  position: relative;

  span {
    pointer-events: none;
  }

  &:focus-visible {
    outline: ds-border-width(xs) solid $ds-color-border-primary;
    outline-offset: 2px;
  }

  @at-root a#{&} {
    box-sizing: border-box;
    text-align: center;
    text-decoration: none;
  }

  &::before {
    content: "";
    border-radius: inherit;
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
  }

  @include min-click-surface();

  .ds-icon {
    display: flex;
    height: ds-px-to-rem($ds-text-btn-toggle__icon-size);
    width: ds-px-to-rem($ds-text-btn-toggle__icon-size);
    margin: ds-spacing(0 $ds-s-050 0 0);
    color: $ds-color-text-primary;
    svg {
      fill: currentColor;
    }
  }

  .ds-text-btn-toggle__text {
    @include ds-typography($ds-typography-functional-body-md) {
      color: $ds-color-text-primary;
    }
    @at-root .ds-force-px#{&} {
      @include ds-typography($ds-typography-functional-body-md, true) {
        color: $ds-color-text-primary;
      }
    }
  }

  .ds-text-btn-toggle__off {
    display: flex;
  }
  .ds-text-btn-toggle__on {
    display: none;
  }

  @include ds-hover() {
    &:hover:not(.ds-loading):not(:disabled) .ds-text-btn-toggle__text {
      text-decoration: underline;
      text-underline-offset: $ds-text-btn-toggle__underline-offset;
    }
  }
  &:active:not(:disabled):not(.ds-loading) {
    opacity: $ds-opacity-component-disabled;
  }
  &:disabled:not(.ds-loading) {
    @include ds-text-btn-toggle-disabled;
  }

  @include ds-loading();
}

.ds-text-btn-toggle--selected {
  .ds-text-btn-toggle__on {
    display: flex;
  }
  .ds-text-btn-toggle__off {
    display: none;
  }
}

.ds-force-px {
  &.ds-text-btn-toggle .ds-icon {
    height: $ds-text-btn-toggle__icon-size;
    width: $ds-text-btn-toggle__icon-size;
  }
}