@import "./button_mixins";
@import "../tokens/colors";
@import "../tokens/border_radius";
@import "../tokens/colors";
@import "../tokens/spacing";
@import "../tokens/typography";

$pb_button_sizes: (
  "sm":   0.75rem,
  "md":   0.875rem,
  "lg":   1.125rem,
);

[class*=pb_button_kit]{
  @include pb_button;
  // Size =================
  @each $name, $size in $pb_button_sizes {
    &[class*=size_#{$name}] {
      font-size: $size;
      padding: calc(#{$size} / 2) calc(#{$size} * 2.42);
      @if $name == "sm" {
        min-height: 0;
      }
    }
  }

  // Variants =================
  &[class*=_primary]  {
    @include pb_button_primary;
  }
  &[class*=_secondary]  {
    @include pb_button_secondary;
  }
  &[class*=_link]  {
    @include pb_button_link;
  }
  &[class*=_reaction] {
    background-color: $card_light;
    min-width: 40px;
    border-radius: $border_radius_rounded;
    border: 1px solid $border_light;
    color: $text_lt_light;
    padding: ($space_xxs - 3) $space_xs;
    min-height: $space_md + 4;

    .pb_icon_kit_emoji, .pb_icon_kit {
      font-size: $font_small;
    }
    &:hover {
      background-color: $bg_light;
    }
    &.active {
      border-color:transparent;
      box-shadow: 0px 0px 0 2px $primary_action;
      &:hover {
        background-color: rgba($primary, 0.03);
      }
    }
  }

  &.reaction_default {
    padding: ($space_xxs + 1) ($space_sm - 4);
    color: $text_lt_lighter;
  }

  // Disabled =================
  &[class*=_disabled]  {
    @include pb_button_disabled;
  }

  // Block ====================
  &[class*=_block]  {
    @include pb_button_block;
  }

  // Loading ==================
  &[class*=_loading]  {
    @include pb_button_loading(true);
  }
  // Dark Variants =============
  &.dark  {
    &[class*=_primary]  {
      @include pb_button_primary_dark;
    }
    &[class*=_secondary]  {
      @include pb_button_secondary_dark;
    }
    &[class*=_link]  {
      @include pb_button_link_dark;
    }
    &[class*=_disabled]  {
      @include pb_button_disabled_dark;
    }
  }
}