@import "../tokens/shadows";
@import "../tokens/border_radius";
@import "../tokens/spacing";
@import "../tokens/colors";
@import "../tokens/transition";
@import "../tokens/animation-curves";

$pb_card_border_width: 1px;
$pb_card_border_radius: $border_rad_heavier;
$pb_card_highlight_colors: map-merge(map-merge($status_colors, $product_colors), $category_colors);
$pb_card_highlight_size: 4px;
$pb_card_header_colors: $category_colors;
$pb_card_header_border_radius: $border_rad_heavy;
$pb_card_padding:(
  none: 0,
  xs: $space_xs,
  sm: $space_sm,
  md: $space_md,
  lg: $space_lg,
  xl: $space_xl,
);

@mixin pb_card_selected($border_color: $primary) {
  border-color: $border_color;
  border-width: $pb_card_border_width * 2;
}

@mixin pb_card_selected_dark {
  @include pb_card_selected($primary_action);
}

@mixin pb_card($background: $card_light, $border_color: $border_light) {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: $background;
  background-clip: border-box;
  border-width: $pb_card_border_width;
  border-style: solid;
  border-color: $border_color;
  border-radius: $pb_card_border_radius;
  transition-property: all;
  transition-duration: $transition_short;
  transition-timing-function: $easeIn;

  @each $name, $shadow in $box_shadows {
    &[class*=_#{$name}] {
      box-shadow: $shadow;
    }
  }
}

@mixin pb_card_dark {
  @include pb_card($card_dark, $border_dark);
}

@mixin pb_card_highlight($width, $height, $background){
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: $width;
  height: $height;
  background: $background;
  z-index: 10;
}

@mixin pb_card_header_color($category_color) {
  background: $category_color;
}


[class^=pb_card_kit] {
  @include pb_card;

  &[class*=_selected] {
    @include pb_card_selected;
  }

  &[class*=_dark] {
    @include pb_card_dark;

    &[class*=_selected] {
      @include pb_card_selected_dark;
    }
  }

  [class^=pb_card_header_kit] {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: auto;
    min-height: 1px;
    border: 0;
    border-radius: $pb_card_header_border_radius $pb_card_header_border_radius 0px 0px;  
    @each $color_name, $color_value in $category_colors {
      &[class*=_#{$color_name}] {
        @include pb_card_header_color($color_value);
      }
    }
  }

  [class^=pb_card_body_kit] {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: auto;
    min-height: 1px;
    border: 0;
  }
  
  @each $name, $shadow in $box_shadows {
    &[class*=_#{$name}] {
      box-shadow: $shadow;
    }
  }

  &[class*=_highlight] {
    overflow: hidden;
  }

  &[class*=_highlight_top] {
    @each $color_name, $color_value in $pb_card_highlight_colors {
      &[class*=_highlight_#{$color_name}]::before {
        @include pb_card_highlight(100%, $pb_card_highlight_size, $color_value);
      }
    }
  }

  &[class*=_highlight_side] {
    @each $color_name, $color_value in $pb_card_highlight_colors {
      &[class*=_highlight_#{$color_name}]::before {
        @include pb_card_highlight($pb_card_highlight_size, 100%, $color_value);
      }
    }
  }
}