@import "../tokens/border_radius";
@import "../tokens/colors";
@import "../tokens/opacity";
@import "../tokens/shadows";
@import "../tokens/spacing";
@import "../tokens/transition";
@import "../tokens/typography";
@import "../utilities/focus";

$pb_button_size: 40px;
$pb_button_v_padding: 7px;
$pb_button_h_padding: 28px;
$pb_button_hover_darken: 4%;
$pb_button_border_width: 0px;

@mixin pb_button_variant($bg: $primary_action, $color: $text_dk_default, $border: transparent) {
  background-color: $bg;
  color: $color;
  border-color: $border;

  &:active {
    border-color: darken($bg, $pb_button_hover_darken);
  }
}

@mixin pb_button {
  text-rendering: optimizeLegibility;
  font-size: $font_small;
  font-weight: $bold;
  letter-spacing: $lspace_loose;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  text-transform: none;
  border-width: $pb_button_border_width;
  border-style: solid;
  border-radius: $border_rad_heavy;
  min-height: $pb_button_size;
  line-height: 1.5;
  padding: $pb_button_v_padding $pb_button_h_padding;
  cursor: pointer;
  outline: none;
  transition: background $transition_default ease, color $transition_default ease, box-shadow $transition_default ease;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-basis: auto;
  width: fit-content;
  font-family: $font_family_base;
  white-space: nowrap;

  @include focus;

  &[class*=dark] {
    @include focus-dark
  }

  .loading-icon {
    position: absolute;
    display: none;
  }
  .pb_button_content {
    visibility: visible;
  }

  .button_with_icon {
    margin-right: $space_xs;
  }
  .button_with_icon_right {
    margin-left: $space_xs;
  }

  &:hover {
    outline: none;
  }

  &:active {
    outline: none;
    border-width: $pb_button_border_width;
  }

};

@mixin pb_button_hover($bg: darken($primary_action, $pb_button_hover_darken)){
  background-color: $bg;
}

// Primary ======================
@mixin pb_button_primary {
  @include pb_button_variant($primary_action, $text_dk_default, transparent);

  @media (hover:hover) {
    &:hover {
      @include pb_button_hover;
    }
    &:active {
      transition: none;
      @include pb_button_variant($primary_action);
    }
  }
}

// Secondary ====================
@mixin pb_button_secondary {
  @include pb_button_variant($secondary_action, $primary_action);

  @media (hover:hover) {
    &:hover {
      @include pb_button_hover(rgba($primary_action, $opacity_3));
    }
    &:active {
      transition: none;
      @include pb_button_variant($secondary_action, $primary_action);
    }
  }
}

// Link =========================
@mixin pb_button_link {
  @include pb_button_variant($transparent, $primary_action);

  @media (hover:hover) {
    &:hover {
      @include pb_button_hover($transparent);
      color: $text_lt_default;
    }
    &:active {
      transition: none;
      @include pb_button_variant($transparent, $primary_action);
    }
  }
}

// Disabled ====================
@mixin pb_button_disabled {
  $disabled_color: rgba($charcoal, $opacity_5);
  @include pb_button_variant(rgba($slate, $opacity_4), $disabled_color);
  cursor: not-allowed;
  &:focus {
    outline: none;
  }
  &:hover {
    @include pb_button_variant(rgba($slate, $opacity_4), $disabled_color);
  }
  &:active {
    @include pb_button_variant(rgba($slate, $opacity_4), $disabled_color);
  }
}

// Block =======================
@mixin pb_button_block {
  display: flex;
  flex-basis: 100%;
  width: 100%;
}

// Loading =====================
@mixin pb_button_loading($loading: false) {
  @if $loading == true {
    .loading-icon {
      display: block;
    }
    .pb_button_content {
      visibility: hidden;
    }
  }
}

// Dark Primary =================
@mixin pb_button_primary_dark{
  @include pb_button_variant($primary_action);

  @media (hover:hover) {
    &:hover {
      @include pb_button_hover($bg: darken($primary_action, $pb_button_hover_darken));
    }
    &:active {
      transition: none;
      @include pb_button_variant($primary_action);
    }
  }
}

// Dark Secondary ==============
@mixin pb_button_secondary_dark{
  @include pb_button_variant(rgba($white, $opacity_2), $white);

  @media (hover:hover) {
    &:hover {
      @include pb_button_hover(rgba($primary_action, $opacity_2));
    }
    &:active {
      transition: none;
      @include pb_button_variant(rgba($white, $opacity_2), $white);
    }
  }
}

// Dark Link =============
@mixin pb_button_link_dark {
  @include pb_button_variant($transparent, $active_dark);

  @media (hover:hover) {
    &:hover {
      @include pb_button_hover($transparent);
      color: rgba($active_dark, $opacity_6)
    }
    &:active {
      transition: none;
      @include pb_button_variant($transparent, $active_dark);
    }
  }
}

// Dark Disabled ====================
@mixin pb_button_disabled_dark {
  $disabled_color: rgba($white, $opacity_5);
  @include pb_button_variant(rgba($slate, $opacity_5), $disabled_color);
  pointer-events: none;
}