// Tabbed Carousel
// Carousel with tab-like menu, plus arrows to advance at FULL desktop only
//
// Contains Image + text. Utilize media classes to position content and images.
//
// .tabbed-carousel     - default style, fixed height set in CSS
// .tabbed-carousel.page-block--lowlight - dark carousel
// .tabbed-carousel__items - list of slides
// .tabbed-carousel__item - child of list, single slide
// .tabbed-carousel__item-header  - slide header
// .tabbed-carousel__item-text    - slide text
// .tabbed-carousel__item-image   - slide image, extends to wide grid and gracefully gets cut
//
// Styleguide Tabbed Carousel.

/*================ Tabbed carousel dark variant ================*/
.tabbed-carousel.page-block--lowlight {

  .tabbed-carousel__nav {
    border-color: $color-grey-text--light;
  }

  .tabbed-carousel__nav-item {
    background-color: $color-slate--dark;
    color: $color-grey-text--light;

    &:before {
      border-left-color: $color-grey-text--light;
    }

    &:after {
      border-left-color: $color-slate--dark;
    }

    &:focus,
    &:hover,
    &.js-is-active {
      background: $color-slate;
      color: $color-white;

      + .tabbed-carousel__nav-item:after {
        border-left-color: $color-slate;
      }
    }
  }

  .tabbed-carousel__item-text {
    h4 {
      color: $color-white;
    }
  }
}

/*============================================================================
 Tabbed carousel items
==============================================================================*/

/*================ Transitions ================*/
.tabbed-carousel__item {
  transition: opacity 300ms ease 0s;

  @include shopify-breakpoint($tablet-up) {
    @include clearfix;
    opacity: 0;
    z-index: 0;
    display: none;

    .tabbed-carousel__item-header {
      opacity: 0;
      transition: opacity 300ms ease 300ms, transform 500ms ease 300ms;
      transform: translateY(30px);
    }

    .tabbed-carousel__item-text {
      opacity: 0;
      transition: opacity 300ms ease 400ms, transform 500ms ease 400ms;
      transform: translateY(30px);
    }

    .tabbed-carousel__item-image {
      opacity: 0;
      transition: opacity 500ms ease 500ms;
      transition-property: opacity, transform;
      transform: translateX(20px);
    }

    &.js-is-active {
      opacity: 1;
      z-index: 1;
      display: block;

      .tabbed-carousel__item-text {
        opacity: 1;
        transform: translateY(0);
      }

      .tabbed-carousel__item-header {
        opacity: 1;
        transform: translateY(0);
      }

      .tabbed-carousel__item-image {
        opacity: 1;
        transform: translateX(0);
      }
    }
  }

  /*================ Mobile ================*/
  @include shopify-breakpoint($mobile) {
    padding: 15px 0 10px;
    margin-bottom: 0;
    border-top: 1px solid $color-grey-border-on--white;

    .tabbed-carousel__item-header {
      padding-right: 20px;
      margin-bottom: 5px;
    }
  }
}

.segment-online {
  .tabbed-carousel__nav-item {
    &:focus {
      border-bottom: solid 1px $color-yellow;
    }
  }
}

.segment-pos {
  .tabbed-carousel__nav-item {
    &:focus {
      border-bottom: solid 1px $color-blue;
    }
  }
}

.segment-mobile {
  .tabbed-carousel__nav-item {
    &:focus {
      border-bottom: solid 1px $color-green;
    }
  }
}

/*============================================================================
 Tabbed carousel item content
==============================================================================*/
.tabbed-carousel__item-image {
  z-index: 1;
}

.tabbed-carousel__item-content {
  z-index: 2;
}

.tabbed-carousel__mobile-image {
  margin: em($gutter) 0;
}

.tabbed-carousel__item-text {
  @include shopify-breakpoint($mobile) {
    padding-top: em(10);
  }

  > p {
    margin-bottom: em(25);

    &:last-child {
      margin-bottom: em(15);
    }
  }
}

/*============================================================================
 Tabbed carousel nav arrows
==============================================================================*/

// Places the arrows just outside of the wide container
$carousel-arrow-offset: -($grid-extendor) - 10;

%tabbed-carousel-nav-arrow {
  content: '';
  position: absolute;
  top: 50%;
  max-width: 64px;
  min-width: 64px;
  height: 50px;
  margin-top: -25px;
  z-index: 2;
  background: $color-black;
  border-radius: $border-radius;
  padding: 16px 18px;
  overflow: hidden;
  white-space: nowrap;
  transition: max-width 333ms;

  &:before {
    width: 24px;
    height: 11px;
    display: block;
    position: absolute;
    top: 20px;
    content: '';
  }

  &:focus,
  &:hover {
    max-width: 200px;

    .tab-label {
      opacity: 1;
      transform: translateX(0);
    }
  }

  .tab-label {
    @include font-brandon-black;
    pointer-events: none;
    display: inline-block;
    opacity: 0;
    color: $color-white;
    font-size: em(12);
    text-transform: uppercase;
    transition: opacity 300ms, transform 300ms;
  }
}

.tabbed-carousel__nav-prev {
  @extend %tabbed-carousel-nav-arrow;
  display: none;

  @include shopify-breakpoint($wide) {
    display: inline-block;
    left: $carousel-arrow-offset;
  }

  &:before {
    background-image: asset-svg-url('arrow-left');
    left: 18px;
  }

  > span {
    padding-left: 32px;
    transform: translateX(100%);
  }
}

.tabbed-carousel__nav-next {
  @extend %tabbed-carousel-nav-arrow;
  display: none;

  @include shopify-breakpoint($wide) {
    display: block;
    right: $carousel-arrow-offset;
  }

  &:before {
    background-image: asset-svg-url('arrow-right');
    right: 18px;
  }

  > span {
    padding-right: 32px;
    transform: translateX(-100%);
  }
}