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

$ds-btn-outlined__border-width: ds-border-width(xxs);
@function _btn-brdr($value, $rem: false) {
  $value: (ds-strip-unit($value) - ds-strip-unit($ds-btn-outlined__border-width)) * 1px;
  @if $rem {
    @return ds-px-to-rem($value);
  }
  @return $value;
}

.ds-btn {
  --ds-btn__background-color: #{$ds-color-surface-primary};
  --ds-btn__border-color: transparent;
  --ds-btn__outline-color: #{$ds-color-border-primary-strongest};
  --ds-btn__icon-size: #{ds-px-to-rem(24px)};

  cursor: pointer;
  border: $ds-btn-outlined__border-width solid var(--ds-btn__border-color);
  border-radius: 100px;
  position: relative;
  background-color: var(--ds-btn__background-color);
  color: var(--ds-btn__color);
  display: inline-flex;
  align-items: center;
  justify-content: center;

  @at-root .ds-force-px#{&} {
    --ds-btn__icon-size: 24px;
  }

  &.ds-btn--primary {
    --ds-btn__background-color: #{$ds-color-brand-500};
    --ds-btn__color: #{$ds-color-text-on-brand};
  }

  &.ds-btn--primaryBlack {
    --ds-btn__background-color: #{$ds-color-surface-primaryinvert};
    --ds-btn__color: #{$ds-color-text-primaryinvert};
  }

  &.ds-btn--secondaryFilled {
    --ds-btn__background-color: #{$ds-color-surface-primary-raised-strong};
    --ds-btn__color: #{$ds-color-text-primary};
  }

  &.ds-btn--secondaryOutline {
    --ds-btn__background-color: transparent;
    --ds-btn__color: #{$ds-color-text-primary};
    --ds-btn__border-color: #{$ds-color-border-primary-strong};
  }

  &.ds-btn--staticWhite {
    --ds-btn__outline-color: #{$ds-color-neutral-white};
    --ds-btn__background-color: #{$ds-color-neutral-white};
    --ds-btn__color: #{$ds-color-neutral-black};
  }

  &.ds-btn--transparent {
    --ds-btn__color: #{$ds-color-text-primary};
    --ds-btn__background-color: transparent;
  }

  &.ds-btn--toggle.ds-btn--selected:not(.ds-btn--icon-only) {
    --ds-btn__background-color: transparent;
    --ds-btn__color: #{$ds-color-text-primary};
    --ds-btn__border-color: #{$ds-color-border-primary-strongest};
    --ds-btn__outline-color: #{$ds-color-border-primary-strongest};
  }

  &.ds-btn--sm {
    --ds-btn__icon-size: #{ds-px-to-rem(20px)};
    --ds-btn__icon-padding: #{_btn-brdr(ds-spacing($ds-s-050), true)};
    --ds-btn__icon-only-padding: #{ds-px-to-rem(5px)};
    // Using decimal pixels here to force (one-line) buttons to be 32px.
    padding: #{ds-px-to-rem(4.5px)} _btn-brdr(ds-spacing($ds-s-100), true);
    @include ds-typography($variable: $ds-typography-functional-body-sm, $fontWeight: $ds-fontweight-medium);
    @at-root .ds-force-px#{&} {
      --ds-btn__icon-size: 20px;
      --ds-btn__icon-padding: #{_btn-brdr(ds-spacing($ds-s-050))};
      --ds-btn__icon-only-padding: 5px;

      padding: 5px _btn-brdr(ds-spacing($ds-s-100)) 4px;

      @include ds-typography(
        $variable: $ds-typography-functional-body-sm,
        $fontWeight: $ds-fontweight-medium,
        $forcePx: true
      );
    }
  }

  &.ds-btn--md {
    --ds-btn__icon-padding: #{_btn-brdr(ds-spacing($ds-s-100), true)};
    --ds-btn__icon-only-padding: #{_btn-brdr(ds-spacing($ds-s-050), true)};
    padding: _btn-brdr(ds-spacing($ds-s-050), true) _btn-brdr(ds-spacing($ds-s-125), true);
    @include ds-typography($variable: $ds-typography-functional-body-md, $fontWeight: $ds-fontweight-medium);
    @at-root .ds-force-px#{&} {
      --ds-btn__icon-padding: #{_btn-brdr(ds-spacing($ds-s-100))};
      --ds-btn__icon-only-padding: #{_btn-brdr(ds-spacing($ds-s-050))};
      padding: _btn-brdr(ds-spacing($ds-s-050)) _btn-brdr(ds-spacing($ds-s-125));
      @include ds-typography(
        $variable: $ds-typography-functional-body-md,
        $fontWeight: $ds-fontweight-medium,
        $forcePx: true
      );
    }
  }

  &.ds-btn--lg {
    --ds-btn__icon-padding: #{_btn-brdr(ds-spacing($ds-s-125), true)};
    --ds-btn__icon-only-padding: #{_btn-brdr(ds-spacing($ds-s-075), true)};
    padding: _btn-brdr(ds-spacing($ds-s-075), true) _btn-brdr(ds-spacing($ds-s-150), true);
    @include ds-typography($variable: $ds-typography-functional-body-md, $fontWeight: $ds-fontweight-medium);

    @at-root .ds-force-px#{&} {
      --ds-btn__icon-padding: #{_btn-brdr(ds-spacing($ds-s-125))};
      --ds-btn__icon-only-padding: #{_btn-brdr(ds-spacing($ds-s-075))};
      padding: _btn-brdr(ds-spacing($ds-s-075)) _btn-brdr(ds-spacing($ds-s-150));
      @include ds-typography(
        $variable: $ds-typography-functional-body-md,
        $fontWeight: $ds-fontweight-medium,
        $forcePx: true
      );
    }
  }

  &.ds-btn--xl {
    --ds-btn__icon-size: #{ds-px-to-rem(24px)};
    --ds-btn__icon-padding: #{_btn-brdr(ds-spacing($ds-s-200), true) - ds-px-to-rem(4px)};
    --ds-btn__icon-only-padding: #{_btn-brdr(ds-spacing($ds-s-100), true)};
    padding: _btn-brdr(ds-spacing($ds-s-100), true) _btn-brdr(ds-spacing($ds-s-200), true);
    @include ds-typography($variable: $ds-typography-functional-body-md, $fontWeight: $ds-fontweight-medium);
    @at-root .ds-force-px#{&} {
      --ds-btn__icon-size: 24px;
      --ds-btn__icon-padding: #{_btn-brdr(ds-spacing($ds-s-200)) - 4px};
      --ds-btn__icon-only-padding: #{_btn-brdr(ds-spacing($ds-s-200))};
      padding: _btn-brdr(ds-spacing($ds-s-100)) _btn-brdr(ds-spacing($ds-s-200));
      @include ds-typography(
        $variable: $ds-typography-functional-body-md,
        $fontWeight: $ds-fontweight-medium,
        $forcePx: true
      );
    }
  }

  &.ds-btn--icon-only {
    padding: var(--ds-btn__icon-only-padding);
    @at-root .ds-force-px#{&} {
      padding: var(--ds-btn__icon-only-padding);
    }
  }

  span {
    pointer-events: none;
  }

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

  &:not(.ds-loading):disabled {
    color: $ds-color-text-primary-disabled;
    background-color: $ds-color-button-primary-bg-disabled;
    cursor: not-allowed;
  }

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

  &::before {
    content: "";
    border-radius: inherit;
    pointer-events: none;
    position: absolute;
    top: -$ds-btn-outlined__border-width;
    left: -$ds-btn-outlined__border-width;
    bottom: -$ds-btn-outlined__border-width;
    right: -$ds-btn-outlined__border-width;
    background-color: transparent;
  }

  @include min-click-surface();

  span,
  i {
    position: relative;
  }

  @include ds-hover() {
    &:hover:not(:disabled):not(.ds-loading) {
      opacity: $ds-opacity-component-hover-pressed;
    }
  }

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

  @include ds-loading();
}

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

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

.ds-btn--icon-left,
.ds-btn--icon-right,
.ds-btn--toggle.ds-btn--selected,
.ds-btn--icon-only {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  .ds-icon {
    display: flex;
    height: var(--ds-btn__icon-size);
    width: var(--ds-btn__icon-size);
    svg {
      fill: currentColor;
    }
  }
}
.ds-btn.ds-btn--icon-right {
  padding-right: var(--ds-btn__icon-padding);
  &.ds-force-px {
    padding-right: var(--ds-btn__icon-padding);
  }
  .ds-icon {
    margin: ds-spacing(0 0 0 $ds-s-050, rem);
    @at-root .ds-force-px#{&} {
      margin: ds-spacing(0 0 0 $ds-s-050);
    }
  }
  &.ds-btn--sm .ds-icon {
    margin: ds-spacing(0 0 0 $ds-s-025, rem);
    @at-root .ds-force-px#{&} {
      margin: ds-spacing(0 0 0 $ds-s-025);
      // Compensate for padding to align forcePx button height to 32px
      margin-top: -1px;
    }
  }
}
.ds-btn.ds-btn--icon-left,
.ds-btn.ds-btn--selected:not(.ds-btn--icon-only) {
  flex-direction: row-reverse;
  padding-left: var(--ds-btn__icon-padding);
  .ds-icon {
    margin: ds-spacing(0 $ds-s-050 0 0, rem);
  }
  &.ds-btn--sm .ds-icon {
    margin: ds-spacing(0 $ds-s-025 0 0, rem);
  }
  &.ds-force-px {
    padding-left: var(--ds-btn__icon-padding);
    .ds-icon {
      margin: ds-spacing(0 $ds-s-050 0 0);
    }
    &.ds-btn--sm .ds-icon {
      margin: ds-spacing(0 $ds-s-025 0 0);
      // Compensate for padding to align forcePx button height to 32px
      margin-top: -1px;
    }
  }
}

.ds-btn--toggle {
  .ds-btn__on,
  .ds-btn__off {
    align-items: center;
  }
  .ds-btn__on {
    display: none;
  }
  &.ds-btn--selected {
    .ds-btn__on {
      display: flex;
    }
    .ds-btn__off {
      display: none;
    }
  }

  // we have to override spinner styling since spinner variant is based on "off" button variant
  &.ds-btn--selected.ds-loading:not(.ds-btn--icon-only) {
    .ds-spinner__inner {
      border-top-color: $ds-color-text-primary;
      &::before {
        border-color: $ds-color-text-primary;
      }
    }
  }
}