@import "settings";
@import "foundation-sites/scss/components/callout";
@import "utils";
@import "typography";

// Bonsai Variables

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

/// Default fade value for the callout's background
/// @type Number
$bonsai-callout-background-fade: 0% !default;

/// Default font size for callout text
/// @type Number
$bonsai-callout-text-font-size: 14px !default;

/// Default top margin size for links/buttons on callouts
/// @type Number
$bonsai-callout-link-button-margin-top: -5px !default;

/// Default width of icons in the callout
/// @type Number
$bonsai-callout-icon-width: 25px !default;

// Foundation Configuration
$callout-background-fade: $bonsai-callout-background-fade;

/// Formats the positioning and width of callout icons
@mixin callout-icon {
  @include text-align(center);
  @include vertical-align(middle);

  width: $bonsai-callout-icon-width;
  margin-right: $bonsai-spacing-small;
}

/// Formats the positioning of links/buttons on callouts
@mixin callout-action {
  font-size: $bonsai-callout-text-font-size;
  float: right;

  &.button {
    margin-top: $bonsai-callout-link-button-margin-top;
  }
}

/// Adds Foundation's styling for callouts and positions icons and links/buttons
@mixin bonsai-callout {
  @if $bonsai-include-callout {
    @include foundation-callout;

    .callout {
      font-size: $bonsai-callout-text-font-size;

      .callout-icon {
        @include callout-icon;
      }

      .callout-action {
        @include callout-action;
      }

      span {
        @include vertical-align(middle);
      }

      &.alert .callout-action {
        color: inherit;
      }
    }
  }
}