@import "settings";

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

/// Default background color for hero panel
/// @type Color
$bonsai-hero-background: $bonsai-primary !default;

/// Default text color for the hero panel
/// @type Color
$bonsai-hero-color: $bonsai-white !default;

/// Default padding between content and edge, within the hero panel
/// @type Number | List
$bonsai-hero-padding: 30px !default;

/// Default font size for the header text within hero panel
/// @type Number
$bonsai-hero-heading-font-size: $bonsai-global-font-size * 3.25 !default;

/// Default font family for the hero header text
/// @type String
$bonsai-hero-heading-font-family: $bonsai-heading-font-family !default;

/// Default font size for the descriptive text
/// @type Number
$bonsai-hero-description-font-size: $bonsai-global-font-size * 1.75 !default;

/// Default font weight for the descriptive text
/// @type Number
$bonsai-hero-description-font-weight: bold !default;

/// Styling for the hero container
///
/// @param {Color} $color - text color for the container contents
/// @param {Color} $background-color - background color for the container
/// @param {Number} $padding - padding for the container
@mixin hero-container(
  $color: $bonsai-hero-color,
  $background-color: $bonsai-hero-background,
  $padding: $bonsai-hero-padding
) {
  background-color: $background-color;
  color: $color;
  padding: $padding;
  position: relative;
  transition: 0.25s ease all;
  overflow: hidden;

  p {
    margin-bottom: 0;
  }

  &.small {
    padding: $padding/2;
  }
}

/// Styling for the heading including color and font-size
///
/// @param {String} $font-family - font family for hero headings
/// @param {Number} $font-size - custom font size, with default
@mixin hero-heading(
  $font-family: $bonsai-hero-heading-font-family,
  $font-size: $bonsai-hero-heading-font-size
) {
  font-size: $font-size;
  font-family: $font-family;
  margin-bottom: 0;
}

/// Styling for the description section
///
/// @param {Number} $font-size - custom font size, with default
/// @param {Number} $font-weight - custom font weight, with default
@mixin hero-description(
  $font-size: $bonsai-hero-description-font-size,
  $font-weight: $bonsai-hero-description-font-weight
) {
  font-size: $font-size;
  font-weight: $font-weight;
}

%hero-pseudo-common {
  content: ' ';
  position: absolute;
  top: 0;
  height: 100%;
  background-repeat: no-repeat;
  background-color: inherit;
}

%hero-pseudo-color {
  width: 54%;
  transform: skew(-25deg);
  background-image: none;
  z-index: 1;
}

%hero-pseudo-image {
  background-image: inherit;
  transform: none;
  z-index: 0;
}

/// Pseudo element styling for the split display
@mixin hero-split {
  &::before {
    @extend %hero-pseudo-common;
    @extend %hero-pseudo-image;

    left: 0;
  }

  &::after {
    @extend %hero-pseudo-common;
    @extend %hero-pseudo-color;

    right: -45px;
  }
}

/// Pseudo element styling for the reverse split display
@mixin hero-split-reverse {
  &::before {
    @extend %hero-pseudo-common;
    @extend %hero-pseudo-color;

    left: -45px;
  }

  &::after {
    @extend %hero-pseudo-common;
    @extend %hero-pseudo-image;

    right: 0;
  }
}

/// Styling for the individual sections of a split hero
@mixin hero-section {
  position: relative;
  z-index: 2;
  text-align: center;
  align-self: center;
  display: table-cell;

  p {
    text-align: left;
    margin-bottom: 0;
    margin-right: $bonsai-spacing-small * 6;
    margin-left: $bonsai-spacing-medium;
    line-height: 2;
  }
}

/// Used to generate the default Hero Bonsai classes
@mixin hero {
  @if $bonsai-include-hero {
    .hero {
      @include hero-container;

      #{&}-heading {
        @include hero-heading;
      }

      #{&}-description {
        @include hero-description;
      }

      #{&}-section {
        @include hero-section;
      }

      &.split {
        @include hero-split;
      }

      &.split-reverse {
        @include hero-split-reverse;
      }
    }
  }
}