// Foundation by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
@import "../settings/colors";
@import "../settings/fonts";
@import "../settings/buttons";

@import "../tools/mixins/core";
@import "../tools/mixins/spacing-responsive";

//
// @name _reveal.scss
// @dependencies _global.scss
//


// We use these to control the style of the reveal overlay.
$reveal-overlay-bg: rgba($black, .45) !default;
$reveal-overlay-bg-old: $black !default;

// We use these to control the style of the modal itself.
$reveal-modal-bg: $white !default;
$reveal-position-top: rem-calc(100) !default;
$reveal-default-width: 80% !default;
$reveal-max-width: $row-width !default;
$reveal-modal-padding: rem-calc(30) !default;
$reveal-box-shadow: 0 0 10px rgba($black,.4) !default;

// We use these to style the reveal close button
$reveal-close-font-size: rem-calc(40) !default;
$reveal-close-top: rem-calc(10) !default;
$reveal-close-side: rem-calc(22) !default;
$reveal-close-color: $base !default;
$reveal-close-weight: $font-weight-bold !default;

// We use this to set the default radius used throughout the core.
$reveal-radius: $global-radius !default;
$reveal-round: $global-rounded !default;

// We use these to control the modal border
$reveal-border-style: solid !default;
$reveal-border-width: 1px !default;
$reveal-border-color: $steel !default;

$reveal-modal-class: "reveal-modal" !default;
$close-reveal-modal-class: "close-reveal-modal" !default;

// Set base z-index
$z-index-base: 1005;

//
// @mixins
//

// We use this to create the reveal background overlay styles
@mixin reveal-bg() {
  // position: absolute; // allows modal background to extend beyond window position
  background: $reveal-overlay-bg-old; // Autoprefixer should be used to avoid such variables needed when Foundation for Sites can do so in the near future.
  background: $reveal-overlay-bg;
  bottom: 0;
  display: none;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: $z-index-base - 1;
  #{$default-float}: 0;
}

// We use this mixin to create the structure of a reveal modal
//
// $base-style - Provides reveal base styles, can be set to false to override. Default: true, Options: false
// $width - Sets reveal width Default: $reveal-default-width || 80%
//
@mixin reveal-modal-base( $base-style: true, $width:$reveal-default-width, $max-width:$reveal-max-width, $border-radius: $reveal-radius) {
  @if $base-style {
    border-radius: $border-radius;
    display: none;
    position: absolute;
    top:0;
    visibility: hidden;
    width: 100%;
    z-index: $z-index-base;
    #{$default-float}: 0;

    @media #{$small-only} {
      min-height:100vh;
    }

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

    // Get rid of margin from first and last element inside modal
    > :first-child { margin-top: 0; }

    > :last-child { margin-bottom: 0; }
  }

  @if $width {
    @media #{$medium-up} {
      left: 0;
      margin: 0 auto;
      max-width: $max-width;
      right: 0;
      width: $width;
    }
  }
}

// We use this to style the reveal modal defaults
//
// $bg - Sets background color of reveal modal. Default: $reveal-modal-bg || $white
// $padding - Padding to apply to reveal modal. Default: $reveal-modal-padding.
// $border - Choose whether reveal uses a border. Default: true, Options: false
// $border-style - Set reveal border style. Default: $reveal-border-style || solid
// $border-width - Width of border (i.e. 1px). Default: $reveal-border-width.
// $border-color - Color of border. Default: $reveal-border-color.
// $box-shadow - Choose whether or not to include the default box-shadow. Default: true, Options: false
// $radius - If true, set to modal radius which is $global-radius || explicitly set radius amount in px (ex. $radius:10px). Default: false
// $top-offset - Default: $reveal-position-top || 50px
@mixin reveal-modal-style(
  $bg:false,
  $padding:false,
  $border:false,
  $border-style:$reveal-border-style,
  $border-width:$reveal-border-width,
  $border-color:$reveal-border-color,
  $box-shadow:false,
  $radius:false,
  $top-offset:false) {

  @if $bg { background-color: $bg; }
  @if $padding != false { padding: $padding; }

  @if $border { border: $border-style $border-width $border-color; }

  // We can choose whether or not to include the default box-shadow.
  @if $box-shadow {
    box-shadow: $reveal-box-shadow;
  }

  // We can control how much radius is used on the modal
  @if $radius == true { @include radius($reveal-radius); }
  @else if $radius { @include radius($radius); }

  @if $top-offset {
    @media #{$medium-up} {
      top: $top-offset;
    }
  }
}

// We use this to create a close button for the reveal modal
//
// $color - Default: $reveal-close-color || $base
@mixin reveal-close($color:$reveal-close-color) {
  color: $color;
  cursor: $cursor-pointer-value;
  font-size: $reveal-close-font-size;
  font-weight: $reveal-close-weight;
  line-height: 1;
  position: absolute;
  top: $reveal-close-top;
  #{$opposite-direction}: $reveal-close-side;
}

@include exports("reveal") {

  // Reveal Modals
  .reveal-modal-bg { @include reveal-bg; }

  .#{$reveal-modal-class} {
    @include reveal-modal-base;
    @include reveal-modal-style(
      $bg:$reveal-modal-bg,
      $padding:$reveal-modal-padding,
      $border:true,
      $box-shadow:true,
      $radius:false,
      $top-offset:$reveal-position-top
    );

    &.radius { @include reveal-modal-style($radius:true); }
    &.round  { @include reveal-modal-style($radius:$reveal-round); }
    &.collapse { @include reveal-modal-style($padding:0); }
    &.tiny  { @include reveal-modal-base(false, 30%); }
    &.cui-modal--small { @include reveal-modal-base(false, 40%); }
    &.medium  { @include reveal-modal-base(false, 60%); }
    &.large { @include reveal-modal-base(false, 70%); }
    &.xlarge { @include reveal-modal-base(false, 95%); }
    &.full {
      @include reveal-modal-base(false, 100%);
      height: 100vh;
      height:100%;
      left:0;
      margin-left: 0 !important;
      max-width: none !important;
      min-height:100vh;
      top:0;
    }

    // Modals pushed to back
    &.toback {
      z-index: $z-index-base - 2;
    }

    .#{$close-reveal-modal-class} { @include reveal-close; }
  }
}

/* begin reveal override */

@include exports("reveal-ui") {

    // Reveal Modals
    .reveal-modal-bg { @include reveal-bg; }

    .modal-open {
      overflow: hidden;
    }

    .#{$reveal-modal-class} {
      @include reveal-modal-base;
      @include reveal-modal-style(
        $bg:$reveal-modal-bg,
        $padding:$reveal-modal-padding,
        $border:true,
        $box-shadow:true,
        $radius:false,
        $top-offset:$reveal-position-top
      );
      position: fixed;

      &.radius { @include reveal-modal-style($radius:true); }
      &.round  { @include reveal-modal-style($radius:$reveal-round); }
      &.collapse { @include reveal-modal-style($padding:0); }
      &.dialog {
        @include reveal-modal-base(false, 380px);
        padding: 0;
        outline: none;
        .cui-modal__content {
          position: static;
          border: none;
        }
        .cui-close {
          display: none;
        }
        .cui-modal__header {
          padding: rem-calc(24px);
          padding-bottom: rem-calc(16px);
        }
        .cui-modal__title {
          text-align: center;
          font-size: 20px;
          color: $gray-2;
          font-family: $brand-font-light;
        }
        .cui-modal__body {
          background: $brand-white;
          text-align: center;
          padding: 0 rem-calc(24px);
          margin-bottom: rem-calc(32px);
        }
        .cui-modal__footer {
          display: flex;
          padding: 0;
          .cui-button {
            flex: 1;
            border-top: 1px solid $gray-5;
            border-radius: 0;
            border-bottom-left-radius: $reveal-radius;
            color: $gray-2;
            line-height: 1.6;
            background: $white;
            &.cui-button--blue {
              color: $blue;
            }
            &.cui-button--blue:hover {
              color: $white;
              background-color: $blue;
            }
            &.cui-button--red {
              color: $red;
            }
            &.cui-button--red:hover {
              color: $white;
              background-color: $red;
            }
            &:hover {
              background: $gray-6;
            }
            &:disabled, &.disabled {
              color: $button__font-color--disabled;
              &:hover,
              &:focus {
                background-color: $white;
                color: $button__font-color--disabled;
              }
            }
            &--primary, &-primary {
              color: $blue-base;
              &:hover, &:active {
                color: $white;
                background: $blue-base;
              }
              &:active {
                background: $blue-hover;
              }
            }
            &--alert, &--negative {
              color: $red-base;
              &:hover, &:active {
                color: $white;
                background: $red-base;
              }
              &:active {
                background: $red-hover;
              }
            }
            + .cui-button {
              margin-left: 0;
              border-left: 1px solid $gray-5;
              border-bottom-left-radius: 0;
              border-bottom-right-radius: $reveal-radius;
            }
          }
        }
      }
      &.full {
        @include reveal-modal-base(false, 100%);
        height: 100vh;
        left:0;
        margin-left: 0 !important;
        max-width: none !important;
        min-height: auto;
        top: 24px;
        padding: 0;
        overflow: auto;
        background: transparent;
        box-shadow: none;
        outline: none;
        border: none;

        .cui-modal__title {
          max-width: 900px;
          margin: 0;
          padding: 0 2rem 0 1rem;
          font-size: 36px;
          line-height: 48px;
          color: $brand-white;
          font-family:  $brand-font-extra-light;
        }
        .cui-modal__header {
          background: $blue-base;
          padding: 16px;
          width: 100%;
          flex: 0 0 76px;
          .cui-close {
            color: $white;
            text-shadow: none;
            border: none;
            &:before {
              font-size: 20px;
            }
          }
        }
        .cui-modal__content, .cui-modal__content > [ui-view], .cui-modal__content > [ui-view] > [ui-view] {
          display: flex;
          flex-direction: column;
          height: calc(100vh - 48px);
          max-width: 60.25rem;
          margin: 0 auto;
          position: static;
          background: $gray-6;
          border: none;
          border-radius: 0;
          &.cui-modal--small {
            max-width: 40rem;
            max-height: 500px;
            .cui-modal__header {
              flex: 0 0 50px;
              padding: .75rem 1rem;
            }
            .cui-modal__title {
              font-size: 20px;
              line-height: 32px;
              font-family: $brand-font-light;
            }
            .cui-modal__footer {
              flex: 0 0 64px;
              padding: 16px;
              padding-top: 12px;
            }
            .cui-modal__body {
              > * {
                max-width: 590px;
              }
            }
          }
        }
        .cui-modal__content > [ui-view], .cui-modal__content > [ui-view] > [ui-view] {
          margin: 0;
        }
        .cui-modal__body{
          display: flex;
          flex-direction: column;
          flex: 1 1 auto;
          align-self: stretch;
          align-items: stretch; // IE fix
          overflow-x: hidden;
          overflow-y: auto;
          background: $brand-white;
          margin: 0;
          padding: rem-calc(24) 2rem;
          > * {
            max-width: 900px;
            min-width: 100%;
            width: auto; // IE fix
            flex-shrink: 0;
          }
        }
        .cui-modal__footer {
          text-align: right;
          background: $gray-6;
          width: 100%;
          padding: 20px 2rem;
          flex: 0 0 76px;
        }

        @media (max-width: $screen-md-min) {
          .cui-modal__title {
            padding-left: calc(10vw - 12px);
          }
          .cui-modal__body{
            padding-left: 10vw;
            padding-right: 10vw;
          }
        }
      }

      // Modals pushed to back
      &.toback {
        z-index: $z-index-base - 2;
      }

      .#{$close-reveal-modal-class} { @include reveal-close; }
    }
}

.reveal-modal-bg.fade.in {
  z-index: 10000;
}

//Till Bootstrap is removed

.modal-alt .cui-modal__content {
  top: 0;
  background: transparent;
}

.#{$reveal-modal-class} {
  .cui-modal__body {
    padding: 0;
  }
}

.reveal-bottom {
  transform: translateY(100%);
  transition: transform 0.3s;
  &.in {
    transform: translateY(0);
  }
}