/*
  These styles are fairly complex, and that is inevitable because there are essentially
   six to twelve different design variations that must be supported, depending how you
   count different features. There are three 'types' of styles: default, overlay, sidebar.
   The textual content in the slides may or may not be togglable by the user. When the
   content is not togglable, and details (caption and cta button) still need to be
   togglable on smaller viewports regardless.

   There are also two slider 'variants' here called 'mega' and 'hero'. The 'hero slider'
   is bigger, but there are other stylistic differences for each slide.

   These files follow a certain architecture in an attempt to simplify the stylesheets
    as best as possible. That is such that this primary file defines a few global things
    that are the same across all sliders, then includes:
      home-rotator-togglers.scss - Default styling for all toggle buttons, and the
        universal styles for details (caption and cta) toggling on small devices
      styles/home-rotator-style-abc.scss - Generic styles for each style 'type
        (default, overlay, slider). These are sort of half-way between the two variants
      variants/home-rotator-xyz.scss - Style overrides for the variants. Includes
        overrides for anything, including slide styling and toggle buttons.

*/

// todo: Figure out banner height sizing on all variants. Originals would 'snap' to fixed heights beyond a set point.

$home-rotator-slide--color-panel-bg: white !default;
$home-rotator-slide--color-panel-title: $text-color !default;
$home-rotator-slide--color-panel-text: $text-color !default;
$home-rotator-slide--color-panel-alpha: 1 !default;

@import "home-rotator-togglers.scss";

//@import "styles/home-rotator-style-default.scss";
//@import "styles/home-rotator-style-overlay.scss";
//@import "styles/home-rotator-style-sidebar.scss";
//
@import "variants/home-rotator-panel.scss";
@import "variants/home-rotator-vertical.scss";
@import "variants/home-rotator-horizontal.scss";
//@import "variants/home-rotator-hero.scss";

.homepage-rotator {

  position: relative;

  .flex-direction-nav {
    a.flex-prev {
      left: 13px;
      height:60px;
      &:before {
        content: "\f104";
        font-family: FontAwesome;
        font-size:60px;
        color: white;
      }
    }
    a.flex-next {
      right: 13px;
      height:60px;
      &:before {
        content: "\f105";
        font-family: FontAwesome;
        font-size:60px;
        color: white;
      }
    }
  }

  .flex-direction-nav {
    a.flex-prev, a.flex-next {
      opacity: 0 !important;
    }
  }
  &:hover .flex-direction-nav {
    a.flex-prev, a.flex-next {
      opacity: 1 !important;
    }
  }

  .image-overlay {
    position:absolute;
    top:0;
    left:0;
    right:0;
    margin:0 auto;
    max-width:1200px;
    width:100%; height:100%;
    padding:40px;
    z-index:10;

    @include display-flex;
    @include align-items(center);

    img {
      display:block;
      max-width:43%;
      height:auto;

      margin: 0 auto;
    }
  }

  .details-panel { overflow:hidden; }

  .content {
    max-width:1200px;
    margin: 0 auto;
    left:0;
    right:0;
  }

  .mega-image-slide {
    @include hidden-focus;

    position:relative;

    .wr-background { width:100%; overflow:hidden; }
    .background {
      img {
        display: block;
        width: 100%;
        height:auto;
      }
    }

    @include tablet {
      .background { margin: 0 -10000px; }
      .background img {
        min-height: 400px;
        width:auto;
        margin: 0 auto;
      }
    }

  }


  @include phone {
    .image-overlay img { max-width: 100%; width:400px; }
  }

}