//
// Joyride Variables
//
$include-html-joyride-classes: $include-html-classes !default;

// Controlling default Joyride styles
$joyride-tip-bg: rgb(0,0,0) !default;
$joyride-tip-default-width: 300px !default;
$joyride-tip-padding: em-calc(18 20 24) !default;
$joyride-tip-border: solid 1px #555 !default;
$joyride-tip-radius: 4px !default;
$joyride-tip-position-offset: 22px !default;

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

// This changes the nub size
$joyride-tip-nub-size: 14px !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: #666 !default;

// This changes up the styles for the close button
$joyride-tip-close-color: #777 !default;
$joyride-tip-close-size: 30px !default;
$joyride-tip-close-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.

@if $include-html-joyride-classes != false {

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

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

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

  .joyride-content-wrapper {
    width: 100%;

    padding: $joyride-tip-padding;

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

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

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

  /* 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 {
    line-height: 1.25;
    margin: 0;
    font-weight: $joyride-tip-header-weight;
    color: $joyride-tip-font-color;
  }
  .joyride-tip-guide p {
    margin: em-calc(0 0 18 0);
    font-size: $joyride-tip-font-size;
    line-height: 1.3;
  }

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

  .joyride-close-tip {
    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: #eee !important; }
  }

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

  .joyride-expose-wrapper {
    background-color: #ffffff;
    position: absolute;
    border-radius: 3px;
    z-index: 102;
    @if $experimental {
      -moz-box-shadow: 0 0 30px #ffffff;
      -webkit-box-shadow: 0 0 15px #ffffff;
    }
    box-shadow: 0 0 15px #ffffff;
  }

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


  /* Styles for screens that are atleast 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-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;
        }
      }
    }
  }

}