@import '../../core/all.scss';
@import '../../core/_grid.scss';

// We are importing inline the requires foundations scss files for MODAL
//importing _joy_ride.scss - inline
//importing _reveal.sass - inline

//see above

//
// @name _joy_ride.scss
//

// Foundation by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
//
// @variables
//
$include-html-joyride-classes: $include-html-classes !default;

// Controlling default Joyride styles
$joyride-tip-bg: $oil !default;
$joyride-tip-default-width: 300px !default;
$joyride-tip-padding: rem-calc(18 20 24) !default;
$joyride-tip-border: solid 1px $charcoal !default;
$joyride-tip-radius: 4px !default;
$joyride-tip-position-offset: 22px !default;

// Here, we're setting the tip font styles
$joyride-tip-font-color: $white !default;
$joyride-tip-font-size: rem-calc(14) !default;
$joyride-tip-header-weight: $font-weight-bold !default;

// This changes the nub size
$joyride-tip-nub-size: 10px !default;

// This adjusts the styles for the timer when its enabled
$joyride-tip-timer-width: 50px !default;
$joyride-tip-timer-height: 3px !default;
$joyride-tip-timer-color: $steel !default;

// This changes up the styles for the close button
$joyride-tip-close-color: $monsoon !default;
$joyride-tip-close-size: 24px !default;
$joyride-tip-close-weight: $font-weight-normal !default;

// When Joyride is filling the screen, we use this style for the bg
$joyride-screenfill: rgba(0,0,0,0.5) !default;


// We decided not to make a mixin for this because it relies on
// predefined classes to work properly.
@include exports("joyride") {
  @if $include-html-joyride-classes {

    /* Foundation Joyride */
    .joyride-list { display: none; }

    /* Default styles for the container */
    .joyride-tip-guidejoyride-tip-guidej {
      background: $joyride-tip-bg;
      color: $joyride-tip-font-color;
      display: none;
      font-family: inherit;
      font-weight: $font-weight-normal;
      position: absolute;
      top: 0;
      width: 95%;
      z-index: 103;
      #{$default-float}: 2.5%;
    }

    .lt-ie9 .joyride-tip-guide {
      margin-#{$default-float}: -400px;
      max-width: 800px;
      #{$default-float}: 50%;
    }

    .joyride-content-wrapper {
      padding: $joyride-tip-padding;
      width: 100%;

      .button { margin-bottom: 0 !important; }

      .joyride-prev-tip { margin-right: 10px; }
    }

    /* Add a little css triangle pip, older browser just miss out on the fanciness of it */
    .joyride-tip-guide {
      .joyride-nub {
        border: $joyride-tip-nub-size solid $joyride-tip-bg;
        display: block;
        height: 0;
        position: absolute;
        width: 0;
        #{$default-float}: $joyride-tip-position-offset;

        &.top {
          border-color: $joyride-tip-bg;
          border-top-color: transparent !important;
          border-top-style: solid;
          border-#{$default-float}-color: transparent !important;
          border-#{$opposite-direction}-color: transparent !important;
          top: -($joyride-tip-nub-size*2);
        }
        &.bottom {
          border-color: $joyride-tip-bg !important;
          border-bottom-color: transparent !important;
          border-bottom-style: solid;
          border-#{$default-float}-color: transparent !important;
          border-#{$opposite-direction}-color: transparent !important;
          bottom: -($joyride-tip-nub-size*2);
        }

        &.right { right: -($joyride-tip-nub-size*2); }
        &.left { left: -($joyride-tip-nub-size*2); }
      }
    }

    /* Typography */
    .joyride-tip-guide h1,
    .joyride-tip-guide h2,
    .joyride-tip-guide h3,
    .joyride-tip-guide h4,
    .joyride-tip-guide h5,
    .joyride-tip-guide h6 {
      color: $joyride-tip-font-color;
      font-weight: $joyride-tip-header-weight;
      line-height: 1.25;
      margin: 0;
    }
    .joyride-tip-guide p {
      font-size: $joyride-tip-font-size;
      line-height: 1.3;
      margin: rem-calc(0 0 18 0);
    }

    .joyride-timer-indicator-wrap {
      border: $joyride-tip-border;
      bottom: rem-calc(16);
      height: $joyride-tip-timer-height;
      position: absolute;
      width: $joyride-tip-timer-width;
      #{$opposite-direction}: rem-calc(17);
    }
    .joyride-timer-indicator {
      background: $joyride-tip-timer-color;
      display: block;
      height: inherit;
      width: 0;
    }

    .joyride-close-tip {
      color: $joyride-tip-close-color !important;
      font-size: $joyride-tip-close-size;
      font-weight: $joyride-tip-close-weight;
      line-height: .5 !important;
      position: absolute;
      text-decoration: none;
      top: 10px;
      #{$opposite-direction}: 12px;

      &:hover,
      &:focus { color: $smoke !important; }
    }

    .joyride-modal-bg {
      background: $joyride-screenfill;
      cursor: $cursor-pointer-value;
      display: none;
      height: 100%;
      position: fixed;
      top: 0;
      width: 100%;
      z-index: 100;
      #{$default-float}: 0;
    }

    .joyride-expose-wrapper {
      background-color: $white;
      border-radius: 3px;
      box-shadow: 0 0 15px $white;
      position: absolute;
      z-index: 102;
    }

    .joyride-expose-cover {
      background: transparent;
      border-radius: 3px;
      left: 0;
      position: absolute;
      top: 0;
      z-index: 9999;
    }


    /* Styles for screens that are at least 768px; */
    @media #{$small} {
      .joyride-tip-guide { width: $joyride-tip-default-width; #{$default-float}: inherit;
        .joyride-nub {
          &.bottom {
            border-color: $joyride-tip-bg !important;
            border-bottom-color: transparent !important;
            border-#{$default-float}-color: transparent !important;
            border-#{$opposite-direction}-color: transparent !important;
            bottom: -($joyride-tip-nub-size*2);
          }
          &.right {
            border-color: $joyride-tip-bg !important;
            border-right-color: transparent !important; border-bottom-color: transparent !important;
            border-top-color: transparent !important;
            left: auto;
            right: -($joyride-tip-nub-size*2);
            top: $joyride-tip-position-offset;
          }
          &.left {
            border-color: $joyride-tip-bg !important;
            border-bottom-color: transparent !important;
            border-left-color: transparent !important;
            border-top-color: transparent !important;
            left: -($joyride-tip-nub-size*2);
            right: auto;
            top: $joyride-tip-position-offset;
          }
        }
      }
    }
  }
}


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

$include-html-reveal-classes: $include-html-classes !default;

// 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( $include-z-index-value: true ) {
  // 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: if( $include-z-index-value, $z-index-base - 1, auto );
  #{$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;
  }
  @else{
    box-shadow: none;
  }

  // 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") {
  @if $include-html-reveal-classes {

    // 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%); }
      &.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; }
    }
  }
}

/**
/* EO _reveal.scss from foundation
**/


// Controlling default Joyride styles
$joyride-tip-bg: #FFF;
$joyride-tip-border: 1px solid $black-lighten-50;
$joyride-tip-default-width: 300px !default;
// This changes the nub size
$joyride-tip-nub-size: 10px !default;

// Mixin to add arrow positions to acl-popover
@mixin add-arrow($position: top) {
  $opposite: bottom !default;
  $horizontal: left !default;

  @if $position == bottom { $opposite: top; }
  @if $position == left { $opposite: right; $horizontal: top; }
  @if $position == right { $opposite: left; $horizontal: top; }

  // Stroke
  &:before {
    #{$position}: -11px;
    #{$horizontal}: 21px;
    border-#{$opposite}-color: $black-lighten-30;
    border-width: 11px;
    border-#{$position}: 0;
  }

  // Fill
  &:after {
    #{$position}: -10px;
    #{$horizontal}: 22px;
    border-#{$opposite}-color: #FFF;
    border-width: 10px;
    border-#{$position}: 0;
  }
}

@mixin custom-acl-popup-styles {
  @include radius($global-radius);

  border-color: lighten($black,5);
  padding: 0;

  .popup-heading {
    background: $black;
    color: #FFF;
    padding: 1rem 1.75rem;
  }

  .popup-body {
    padding: 1rem 1.75rem 0.5rem;

    p:last-child {
      margin-bottom: 0.5rem;
    }
  }

  .popup-footer {
    @include clearfix();

    border-top: 1px solid $black-lighten-60;
    padding: 0.5rem 1.75rem 0.75rem;
  }

  .popup-option {
    float: left;
    padding-top: 0.75rem;
  }

  .popup-cta {
    float: right;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;

    a:visited {
      color: $link-color;
    }
  }

  .close-reveal-modal {
    @include no-underline();

    font-size: 1.5rem;
    right: 1rem;
  }

  // override global button spacing
  button, .acl-btn {
    margin-bottom: 0;
  }
}

//
// Popup
//
.acl-popup, .reveal-modal {
  .close-reveal-modal {
    @include reveal-close;
  }

  @include reveal-modal-base;
  @include reveal-modal-style(
    $bg:#FFF,
    $padding:rem-calc(20),
    $border:true,
    $box-shadow:true,
    $radius:false,
    $top-offset:rem-calc(100));
  @include custom-acl-popup-styles;

  @media #{$medium-up} {
    &.tiny  { @include reveal-modal-base(false, 30%); }
    &.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%); }
  }
}

//
// Tip
//
.acl-popover {
  @include radius();
  @include box-shadow(0 0 7px 0 rgba(0,0,0, 0.15));

  // class from Foundation
  background: $joyride-tip-bg;
  color: $font-color;
  display: none;
  #{$default-float}: 2.5%;
  font-family: inherit;
  font-weight: normal;
  position: absolute;
  top: 0;
  width: 95%;
  z-index: 101;

  &.is-visible {
    display: block;
  }

  .joyride-nub {
    display: block;
    position: absolute;
    #{$default-float}: $joyride-tip-position-offset;
    width: 0;
    height: 0;
    border: $joyride-tip-nub-size solid $joyride-tip-bg;

    &.top {
      border-top-style: solid;
      border-color: $joyride-tip-bg;
      border-top-color: transparent !important;
      border-#{$default-float}-color: transparent !important;
      border-#{$opposite-direction}-color: transparent !important;
      top: -($joyride-tip-nub-size*2);
    }
    &.bottom {
      border-bottom-style: solid;
      border-color: $joyride-tip-bg !important;
      border-bottom-color: transparent !important;
      border-#{$default-float}-color: transparent !important;
      border-#{$opposite-direction}-color: transparent !important;
      bottom: -($joyride-tip-nub-size*2);
    }

    &.right { right: -($joyride-tip-nub-size*2); }
    &.left { left: -($joyride-tip-nub-size*2); }
  }

  .acl-popover-wrapper {
    @include clearfix();

    width: 100%;
    padding: $joyride-tip-padding;
    padding-bottom: 1.25rem;

    p { margin-bottom: 0; }
    .button { margin-bottom: 0 !important; }
  }

  // override and define styles for popover
  .acl-popover-close {
    @include no-underline();

    position: absolute;
    #{$opposite-direction}: 12px;
    top: 10px;
    color: $joyride-tip-close-color !important;
    text-decoration: none;
    font-size: $joyride-tip-close-size;
    font-weight: $joyride-tip-close-weight;
    line-height: .5 !important;

    &:hover,
    &:focus {
      color: $black-lighten-40 !important;
    }
  }

  .acl-popover-cta {
    float: right;
    margin-top: 1rem;
  }

  .heading {
    color: $font-color;
    margin-bottom: 0.5rem;
  }

  // Popover with arrow
  &.wa {
    // generic style for arrow
    &:before, &:after {
      border-style: solid;
      border-color: transparent;
      content: "";
      height: 0;
      position: absolute;
      width: 0;
    }

    // arrow top
    &.wa-top {
      @include add-arrow(top)
    }

    // arrow bottom
    &.wa-bottom {
      @include add-arrow(bottom)
    }

    // arrow left
    &.wa-left {
      @include add-arrow(left)
    }
    // arrow right
    &.wa-right {
      @include add-arrow(right)
    }
  }

  button, .acl-btn {
    margin-bottom: 0;
  }
}

// Styles for screens that are at least 768px;
@media #{$small} {
  .acl-popover { width: $joyride-tip-default-width; #{$default-float}: inherit;
    .joyride-nub {
      &.bottom {
        border-color: $joyride-tip-bg !important;
        border-bottom-color: transparent !important;
        border-#{$default-float}-color: transparent !important;
        border-#{$opposite-direction}-color: transparent !important;
        bottom: -($joyride-tip-nub-size*2);
      }
      &.right {
        border-color: $joyride-tip-bg !important;
        border-top-color: transparent !important;
        border-right-color: transparent !important; border-bottom-color: transparent !important;
        top: $joyride-tip-position-offset;
        left: auto;
        right: -($joyride-tip-nub-size*2);
      }
      &.left {
        border-color: $joyride-tip-bg !important;
        border-top-color: transparent !important;
        border-left-color: transparent !important;
        border-bottom-color: transparent !important;
        top: $joyride-tip-position-offset;
        left: -($joyride-tip-nub-size*2);
        right: auto;
      }
    }
  }
}