// Foundation for Sites by ZURB // foundation.zurb.com // Licensed under MIT Open Source

//// /// @group reveal ////

/// Default background color of a modal. /// @type Color $reveal-background: $white !default;

/// Default width of a modal, with no class applied. /// @type Number $reveal-width: 600px !default;

/// Default maximum width of a modal. /// @type Number $reveal-max-width: $global-width !default;

/// Default padding inside a modal. /// @type Number $reveal-padding: $global-padding !default;

/// Default border around a modal. /// @type Number $reveal-border: 1px solid $medium-gray !default;

/// Default radius for modal. /// @type Number $reveal-radius: $global-radius !default;

/// z-index for modals. The overlay uses this value, while the modal itself uses this value plus one. /// @type Number $reveal-zindex: 1005 !default;

/// Background color of modal overlays. /// @type Color $reveal-overlay-background: rgba($black, 0.45) !default;

/// Adds styles for a modal overlay. /// @param {Color} $background [$reveal-overlay-background] - Background color of the overlay. @mixin reveal-overlay($background: $reveal-overlay-background) {

position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: $reveal-zindex;

display: none;
background-color: $background;
overflow-y: scroll;

}

/// Adds base styles for a modal. @mixin reveal-modal-base {

@include disable-mouse-outline;
z-index: $reveal-zindex + 1;
// Workaround android browser z-index bug
backface-visibility: hidden;

display: none;
padding: $reveal-padding;

border: $reveal-border;
border-radius: $reveal-radius;
background-color: $reveal-background;

@include breakpoint(medium) {
  min-height: 0;
}

// Make sure rows don't have a min-width on them
.column {
  min-width: 0;
}

// Strip margins from the last item in the modal
> :last-child {
  margin-bottom: 0;
}

}

/// Adjusts the width of a modal. /// @param {Number} $width - Width of the modal. Generally a percentage. /// @param {Number} $max-width [$reveal-max-width] - Maximum width of the modal. @mixin reveal-modal-width(

$width: $reveal-width,
$max-width: $reveal-max-width

) {

@include breakpoint(medium) {
  @extend %reveal-centered;
  width: $width;
  max-width: $reveal-max-width;
}

}

/// Creates a full-screen modal, which stretches the full width and height of the window. @mixin reveal-modal-fullscreen {

top: 0;
left: 0;

width: 100%;
max-width: none;
height: 100%;
height: 100vh; // sass-lint:disable-line no-duplicate-properties
min-height: 100vh;
margin-left: 0;

border: 0;
border-radius: 0;

}

@mixin foundation-reveal {

// [TODO] Is this necessary?
body.is-reveal-open { // sass-lint:disable-line no-qualifying-elements
  overflow: hidden;
}

// html gets this class only in iOS
html.is-reveal-open,
html.is-reveal-open body {
  min-height: 100%;
  overflow: hidden;
  position: fixed;
  user-select: none;
}

// Overlay
.reveal-overlay {
  @include reveal-overlay;
}

// Modal container
.reveal {
  @include reveal-modal-base;
  @include reveal-modal-width($reveal-width);
  position: relative;
  top: 100px;
  margin-right: auto;
  margin-left: auto;
  overflow-y: auto;

  // 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;
    }
  }

  // Remove padding
  &.collapse {
    padding: 0;
  }

  // Sizing classes
  &.tiny  { @include reveal-modal-width(30%); }
  &.small { @include reveal-modal-width(50%); }
  &.large { @include reveal-modal-width(90%); }

  // Full-screen mode
  &.full {
    @include reveal-modal-fullscreen;
  }

  @include breakpoint($-zf-zero-breakpoint only) {
    @include reveal-modal-fullscreen;
  }

  &.without-overlay {
    position: fixed;
  }
}

}