@import "settings";
@import "foundation-sites/scss/components/card";

/// Set to false to not include cards in the bundle
/// @type Bool
$bonsai-include-cards: $bonsai-include-components !default;

/* -- Bonsai Variables -- */

/// Set default card background color
/// @type Color
$bonsai-card-background: $bonsai-very-light-gray !default;

/// Set default card heigh
/// @type Number
$bonsai-card-height: 100%;

/// Set border around card
/// @type Number | List
$bonsai-card-border: none !default;

/// Set padding within default card
/// @type Number | List
$bonsai-card-padding: 1.75rem !default;

/// Set padding within image based card
/// @type Number | List
$bonsai-image-card-padding: $bonsai-spacing-base*5 $bonsai-card-padding*1.5 $bonsai-spacing-base*20 $bonsai-card-padding*1.5 !default;

/// Set padding within small card heading
/// @type Number | List
$bonsai-small-card-header-padding: $bonsai-card-padding*0.75 !default;

/// Set padding within small card section
/// @type Number | List
$bonsai-small-card-section-padding: 0 $bonsai-card-padding*0.75 $bonsai-card-padding*0.75 $bonsai-card-padding*0.75 !default;

/// Set margin below card
/// @type Number | List
$bonsai-card-margin-bottom: 0.875rem !default;

/// Set the radius of any round
/// @type Number | List
$bonsai-card-radius: none !default;

/// Set the shadow around the card
/// @type Number | List
$bonsai-card-shadow: none !default;

/// Set text color for the main card body
/// @type Color
$bonsai-card-color: $bonsai-body-font-color !default;

/// Set the font family for the card header
/// @type String
$bonsai-card-header-font-family: $bonsai-heading-font-family !default;

/// Set the font size for the card header
/// @type Number
$bonsai-card-header-font-size: $bonsai-h1-font-size !default;

/// Set the font size for the small card header
/// @type Number
$bonsai-small-card-header-font-size: $bonsai-h4-font-size !default;

/// Set the font weight for the card header
/// @type Number
$bonsai-card-header-font-weight: bold !default;

/// Transform the text in the card header
/// @type String
$bonsai-card-header-text-transform: uppercase !default;

/// Set the color for the header background
/// @type Color
$bonsai-card-header-background: $bonsai-light-gray !default;

/// Set the font size for the card body
/// @type Number
$bonsai-card-section-font-size: $bonsai-h4-font-size !default;

/* -- Mixins -- */

/// Card container styling
/// @param {Color} $background - Set background color
/// @param {Color} $color - Set the text color
/// @param {Number | List} $margin-bottom - Set the margin below the card
/// @param {Number | List} $border - Set the border width around card
/// @param {Number} $radius - Set the radius of the curved corner
/// @param {Number | List} $shadow - Set the width of shadow
@mixin bonsai-card-container (
  $background: $bonsai-card-background,
  $color: $bonsai-card-color,
  $margin-bottom: $bonsai-card-margin-bottom,
  $border: $bonsai-card-border,
  $radius: $bonsai-card-radius,
  $shadow: $bonsai-card-shadow
) {
  @include card-container (
    $background: $background,
    $color: $color,
    $margin: $margin-bottom,
    $border: $border,
    $radius: $radius,
    $shadow: $shadow
  );

  height: $bonsai-card-height;
}

/// Style the card header
/// @param {String} $font-family - Set the font family in promo card header
/// @param {Number} $font-size - Set the font size in promo card header
/// @param {Number} $font-weight - Set the font weight in promo card header
/// @param {Color} $color - Set the font color in promo card header
/// @param {Number | List} $padding - Set the padding within the promo card header
/// @param {Color} $background - Set the background color of the promo card header
/// @param {String} $text-transform - Set any transformations for text in promo card header
@mixin bonsai-card-header (
  $font-family: $bonsai-card-header-font-family,
  $font-size: $bonsai-card-header-font-size,
  $font-weight: $bonsai-card-header-font-weight,
  $color: $bonsai-card-color,
  $padding: $bonsai-card-padding,
  $background: $bonsai-card-header-background,
  $text-transform: $bonsai-card-header-text-transform
) {
  font-family: $font-family;
  font-size: $font-size;
  font-weight: $font-weight;
  color: $color;

  @if $background != $bonsai-card-header-background {
    background: $background;
  }

  padding: $padding;
  text-transform: $text-transform;
}

/// Style the card body
/// @param {Number} $font-size - Set the font size within the promo card body
/// @param {Color} $color - Set the font color within the promo card body
/// @param {Number | List} $padding - Set the padding within the promo card body
@mixin bonsai-card-section (
  $font-size: $bonsai-card-section-font-size,
  $color: $bonsai-card-color,
  $padding: $bonsai-card-padding
) {
  @include card-section($padding);

  color: $color;
  font-size: $font-size;

  p {
    font-size: inherit;
  }
}

/// Gateway mixin for card component
@mixin bonsai-cards {
  @if $bonsai-include-cards {
    .card {
      @include bonsai-card-container;

      .card-header {
        @include bonsai-card-header;
      }

      .card-section {
        @include bonsai-card-section;
      }
    }
  }

  .card-image {
    @include bonsai-card-container;

    .card-header {
      @include bonsai-card-header($color: $bonsai-white, $padding: $bonsai-image-card-padding);

      background-size: cover;
    }

    .card-section {
      @include bonsai-card-section;
    }
  }

  .card-small {
    @include bonsai-card-container;

    .card-header {
      @include bonsai-card-header($font-size: $bonsai-small-card-header-font-size, $padding: $bonsai-small-card-header-padding);
    }

    .card-section {
      @include bonsai-card-section($font-size: $bonsai-global-font-size, $padding: $bonsai-small-card-section-padding);
    }
  }
}