// TODO: Refactor this code so it is more readable and easy to maintain

@import './button-vars';
@import '../../mixins/box-sizing';
@import '../../mixins/focus-state';

$btn-lg-height: 56px;
$btn-md-height: 48px;
$btn-sm-height: 40px;
$btn-xs-height: 24px;
$btn-sm-only-icon-padding: 11px;
$btn-md-only-icon-padding: 13px;
$btn-lg-only-icon-padding: 17px;
$types: (primary, secondary, ghost, danger);
$props: (background, border-color, color, outline-color);
$iconProps: (fill, color);

@mixin button-base {
  @include tds-box-sizing;

  font: var(--tds-detail-02);
  letter-spacing: var(--tds-detail-02-ls);
  display: inline-flex;
  align-items: center;
  border-radius: 4px;
  border: none;
  box-shadow: none;
  position: relative;
  text-decoration: none;
  cursor: pointer;
}

button {
  @include button-base;

  height: $btn-lg-height;
  padding: var(--tds-spacing-element-20);
  border: 1px solid transparent;

  &:focus {
    outline: 1px solid var(--scania-blue-400);
  }

  &:focus-visible {
    @include tds-focus-state;
  }

  &.xs {
    padding: var(--tds-spacing-element-4) var(--tds-spacing-element-8);
    height: $btn-xs-height;
    font-size: 12px;
    border-radius: 2px;
  }

  &.sm {
    padding: var(--tds-spacing-element-12);
    height: $btn-sm-height;

    &.icon {
      padding: 10px var(--tds-spacing-element-12);
    }

    &.only-icon {
      padding: $btn-sm-only-icon-padding;
    }
  }

  &.md {
    padding: var(--tds-spacing-element-16);
    height: $btn-md-height;

    &.icon {
      padding: 14px var(--tds-spacing-element-16);
    }

    &.only-icon {
      padding: $btn-md-only-icon-padding;
    }
  }

  &.lg {
    padding: var(--tds-spacing-element-20);
    height: $btn-lg-height;

    &.icon {
      padding: 18px var(--tds-spacing-element-20);
    }

    &.only-icon {
      padding: $btn-lg-only-icon-padding;
    }
  }

  &.fullbleed {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  &.animation-fade {
    transition: background-color var(--tds-motion-duration-fast-02) var(--tds-motion-easing-scania);
  }

  @each $type in $types {
    &.#{$type} {
      @each $prop in $props {
        #{$prop}: var(--tds-btn-#{$type}-#{$prop});
      }

      &.icon {
        @each $prop in $iconProps {
          fill: var(--tds-btn-icon-#{$type}-#{$prop});
          color: var(--tds-btn-icon-#{$type}-#{$prop});
        }
      }

      &:hover {
        @each $prop in $props {
          #{$prop}: var(--tds-btn-#{$type}-#{$prop}-hover);
        }

        &:not(.disabled) {
          ::slotted([slot='icon']) {
            @each $prop in $iconProps {
              fill: var(--tds-btn-icon-#{$type}-#{$prop}-hover);
              color: var(--tds-btn-icon-#{$type}-#{$prop}-hover);
            }
          }
        }
      }

      &:focus-visible {
        @each $prop in $props {
          #{$prop}: var(--tds-btn-#{$type}-#{$prop}-focus);
        }

        ::slotted([slot='icon']) {
          @each $prop in $iconProps {
            fill: var(--tds-btn-icon-#{$type}-#{$prop}-focus);
            color: var(--tds-btn-icon-#{$type}-#{$prop}-focus);
          }
        }
      }

      &:active,
      &.active {
        @each $prop in $props {
          #{$prop}: var(--tds-btn-#{$type}-#{$prop}-active);
        }

        &:not(.disabled) {
          ::slotted([slot='icon']) {
            @each $prop in $iconProps {
              fill: var(--tds-btn-icon-#{$type}-#{$prop}-active);
              color: var(--tds-btn-icon-#{$type}-#{$prop}-active);
            }
          }
        }
      }

      &.disabled,
      &:disabled {
        @each $prop in $props {
          #{$prop}: var(--tds-btn-#{$type}-#{$prop}-disabled);
        }
      }
    }
  }
}

:host(tds-button) {
  display: inline-flex;
  align-items: center;

  ::slotted([slot='icon']) {
    width: var(--tds-spacing-element-20);
    height: var(--tds-spacing-element-20);
  }

  .sm {
    ::slotted([slot='icon']) {
      width: var(--tds-spacing-element-16);
      height: var(--tds-spacing-element-16);
    }
  }
}

:host(.disabled:active) {
  pointer-events: none;
}

:host(.disabled) button {
  cursor: not-allowed;
}

:host(.fullbleed) {
  width: 100%;
  justify-content: center;
}

tds-button {
  button {
    display: inline-flex;
    align-items: center;

    &.sm::slotted([slot='icon']) {
      margin-left: var(--tds-spacing-element-12);
      width: var(--tds-spacing-element-16);
      height: var(--tds-spacing-element-16);
    }

    &.md::slotted([slot='icon']) {
      margin-left: var(--tds-spacing-element-16);
      width: var(--tds-spacing-element-20);
      height: var(--tds-spacing-element-20);
    }

    &.lg::slotted([slot='icon']) {
      margin-left: var(--tds-spacing-element-20);
      width: var(--tds-spacing-element-20);
      height: var(--tds-spacing-element-20);
    }

    &.only-icon::slotted([slot='icon']) {
      margin-left: 0;
    }
  }
}