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

$ds-text-btn__underline-offset: 2px;

.ds-text-btn {
  --ds-text-btn__icon-size: #{ds-px-to-rem(24px)};

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

  &.ds-force-px {
    --ds-text-btn__icon-size: 24px;
  }

  &.ds-text-btn--icon-left {
    --ds-text-btn__icon-margin: #{ds-spacing(0 $ds-s-050 0 0)};
  }

  &.ds-text-btn--icon-right {
    --ds-text-btn__icon-margin: #{ds-spacing(0 0 0 $ds-s-050)};
  }

  &.ds-text-btn--small,
  &.ds-text-btn--sm {
    --ds-text-btn__icon-size: #{ds-px-to-rem(20px)};

    &.ds-force-px {
      --ds-text-btn__icon-size: 20px;
    }

    &.ds-text-btn--icon-left {
      --ds-text-btn__icon-margin: #{ds-spacing(0 $ds-s-025 0 0)};
    }

    &.ds-text-btn--icon-right {
      --ds-text-btn__icon-margin: #{ds-spacing(0 0 0 $ds-s-025)};
    }

    .ds-text-btn__text {
      @include ds-typography-with-force-px($ds-typography-functional-body-sm);
    }
  }

  &.ds-text-btn--icon-only-mobile {
    &.ds-text-btn--icon-left,
    &.ds-text-btn--icon-right {
      @include ds-mq-only-breakpoint(mobile) {
        --ds-text-btn__icon-margin: 0;
        .ds-text-btn__text {
          display: none;
        }
      }
    }
  }

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

  @include min-click-surface();

  span {
    pointer-events: none;
  }

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

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

  .ds-text-btn__text {
    text-underline-offset: $ds-text-btn__underline-offset;
    @include ds-typography-with-force-px($ds-typography-functional-body-md) {
      color: $ds-color-text-primary;
    }
  }

  &:not(:disabled) .ds-text-btn__text {
    text-decoration: underline;
  }

  @include ds-hover() {
    &:hover:not(.ds-loading) .ds-text-btn__text {
      text-decoration: none;
    }
  }

  &:active:not(:disabled):not(.ds-loading) {
    opacity: $ds-opacity-component-disabled;
  }

  &:disabled:not(.ds-loading) {
    cursor: not-allowed;
    &::before {
      background-color: unset;
    }
    .ds-icon {
      color: $ds-color-text-primary-disabled;
    }
    .ds-text-btn__text {
      color: $ds-color-text-primary-disabled;
    }
  }

  @include ds-loading();
}

.ds-text-btn--full-width {
  width: 100%;
  box-sizing: border-box;
}

.ds-text-btn--icon-left,
.ds-text-btn--icon-right {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  .ds-icon {
    display: flex;
    height: var(--ds-text-btn__icon-size);
    width: var(--ds-text-btn__icon-size);
    margin: var(--ds-text-btn__icon-margin);
    color: $ds-color-text-primary;
    svg {
      fill: currentColor;
    }
  }

  &:not(:disabled) .ds-text-btn__text {
    text-decoration: none;
  }

  @include ds-hover() {
    &:hover:not(:disabled):not(.ds-loading) .ds-text-btn__text {
      text-decoration: underline;
    }
  }
}

.ds-text-btn--icon-left {
  flex-direction: row-reverse;
}

@include ds-mq-only-breakpoint(mobile) {
  .ds-text-btn--mobile-full-width {
    width: 100%;
  }
}