// I opened https://github.com/zurb/foundation-sites/issues/10105 to address some of the issues with
// being unable to fully change the class names to what we'd like them to be

////
/// @group modal
////

@import "settings";
@import "foundation-sites/scss/components/reveal";
@import "foundation-sites/scss/util/color";
@import "utils";
@import "typography";

// Bonsai variables

/// Change to false if you don't want modal styling.
/// @type Bool
$bonsai-include-modal: $bonsai-include-components !default;

/// Default border around a modal.
/// @type Number
$bonsai-modal-border: 0 !default;

/// Default box shadow around a modal.
/// @type List
$bonsai-modal-box-shadow: 0 7px 12px 2px rgba($black, 0.35) !default;

/// Hides outline around modal on focus or not.
/// @type Bool
$bonsai-modal-hide-focus-outline: true !default;

/// Default width for modal top icon circle.
/// @type Number
$bonsai-modal-circle-width: 75px !default;

/// Default height for modal top icon circle.
/// @type Number
$bonsai-modal-circle-height: 75px !default;

/// Default border for modal top icon circle.
/// @type Number
$bonsai-modal-circle-border: 5px solid $bonsai-white !default;

/// Default border radius for modal top icon circle.
/// @type Number
$bonsai-modal-circle-border-radius: 60px !default;

/// Default line height for modal icon circle.
/// @type Number
$bonsai-modal-circle-line-height: 85px !default;

/// Default icon size for modal icon circle.
/// @type Number
$bonsai-modal-circle-icon-size: 35px !default;

/// Default icon color for modal icon circle.
/// @type Color
$bonsai-modal-circle-icon-color: $bonsai-white !default;

// Foundation configuration
$reveal-border: $bonsai-modal-border;

/// Adds styles for a modal overlay.
@mixin bonsai-modal-body {
  // Placeholder selector for medium-and-up modals
  // Prevents duplicate CSS when defining multiple Reveal sizes
  @include breakpoint(medium) {
    %reveal-centered {
      right: auto;
      left: auto;
      margin: 0 auto;
    }
  }

  body.is-reveal-open {
    overflow: hidden;
  }

  html.is-reveal-open,
  html.is-reveal-open body {
    min-height: 100%;
    overflow: hidden;
    position: fixed;
    user-select: none;
  }

  // Foundation doesn't have a way to change this class, yet
  .reveal-overlay {
    @include reveal-overlay;
  }
}

/// Adds styles for the fontawesome icon inside modal circle
@mixin bonsai-modal-circle-font {
  font-size: $bonsai-modal-circle-icon-size;
  color: $bonsai-modal-circle-icon-color;
}

/// Adds styles for modal icon circle.
@mixin bonsai-modal-circle {
  width: $bonsai-modal-circle-width;
  height: $bonsai-modal-circle-height;
  border: $bonsai-modal-circle-border;
  border-radius: $bonsai-modal-circle-border-radius;
  background: get-color(information);
  line-height: $bonsai-modal-circle-line-height;
  margin: -50px auto 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

/// Adds styles for the body heading inside the modal
@mixin bonsai-modal-body-heading {
  @include large-heading;
  @include text-align(center);

  margin-top: $bonsai-spacing-large;
}

/// Adds styles for modal content container.
@mixin bonsai-modal-container {
  @include reveal-modal-base;
  @include reveal-modal-width;
  @include box-shadow($bonsai-modal-box-shadow...);

  @if $bonsai-modal-hide-focus-outline {
    @include hide-focus-outline;
  }

  position: relative;
  top: 100px;
  padding: 24px;
  margin-right: auto;
  margin-left: auto;
}

/// Actual mixin that populates modal classes and styles
@mixin bonsai-modal {
  @if $bonsai-include-modal {
    @include bonsai-modal-body;

    .circle {
      @include bonsai-modal-circle;

      i {
        @include bonsai-modal-circle-font;
      }
    }

    .reveal {
      @include bonsai-modal-container;

      &.small {
        @include reveal-modal-width($reveal-width * 0.75);
      }

      &.large {
        @include reveal-modal-width($reveal-width * 1.25);
      }

      h1 {
        @include bonsai-modal-body-heading;
      }
    }
  }
}