// -----------------------------------------------------------------------------
// Flickity
// -----------------------------------------------------------------------------
$btn-width: 40px;
$btn-height: 32px;

// use this class if setting flickity nav property to true to make extra space for nav
.flickity-carousel.flickity-nav-true {
  padding-bottom: $btn-height*2;
}
.carousel-cell {
  margin-right: 10px;
  img {
    max-width: none;
  }
}

.carousel-cell-full {
  width: 100%; /* full width */
  margin-right: 10px;
}

.flickity-prev-next-button {
  transform: none;
  width: $btn-width;
  height: $btn-height;
  background: transparent;
  border-radius: 0;
  font-size: 10px;
  bottom: $btn-height/2;
  top: auto;
  transition: none;

  &.previous {
    left: auto;
    right: $btn-width;

    &:before {
      content: "\e091";
    }
  }
  &.next {
    border-left: 1px solid;
    right: 0;

    &:before {
      content: "\e092";
    }
  }

  &:hover {
    background: transparent;
    &:before {
      opacity: .25;
    }
  }

  svg {
    display: none;
  }

  &:before {
    font-family: 'Glyphicons Halflings';
    display: inline-block;
    position: relative;
  }
}

// extra nav spacing for flickitys that go the full browser width
.flickity-full-width {
  .flickity-prev-next-button {
    &.previous {
      right: $btn-width + 40px;
    }
    &.next {
      right: 40px;
    }
  }
}

.flickity-offset-prev-next {
  .flickity-prev-next-button {
    bottom: -170px;
  }
}

.flickity-page-dots {
  right: $btn-width*2.5;
  bottom: 56px;
  width: auto;
  margin-right: 8px;
  .dot {
    width: auto;
    height: $btn-height;
    line-height: $btn-height;
    background-color: transparent;
    margin: 0;
    counter-increment: li;
    opacity: 1;
    &:before {
      content: '0'  counter(li, decimal-leading-zero);
      color: black;
      opacity: .25;
    }
    &:after {
      content: "/";
      color: black;
      margin: 0 8px;
      opacity: .25;
    }
    &:last-child:after {
      display: none;
    }
    &:hover {
      &:before {
        opacity: .8;
      }
    }
    &.is-selected {
      &:before {
        opacity: 1;
      }
    }
  }
}

.offset-prev-next {
  .flickity-prev-next-button {
    bottom: -180px;
  }
}

.flickity-carousel-home-hero-wrap {
  position: relative;

  .flickity-prev-next-button,
  .flickity-page-dots {
    position: relative;
    bottom: auto;
    right: auto;
    display: inline-block;
    vertical-align: bottom;
  }

  .flickity-viewport {
    .carousel-cell-full {
      &.bg-half-n-half-horizontal:after {
        opacity: 0;
        transform: translateX(15%);
        transform-origin: right top;
        transition-property: all;
        transition-duration: .2s;
        transition-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
        transition-delay: 0s;
      }
      .container-hero-image {
        opacity: 0;
        transition-property: opacity;
        transition-duration: .4s;
        transition-timing-function: ease;
        transition-delay: 0s;
        backface-visibility: hidden;
      }
    }
    .carousel-cell-full.is-selected {
      &.bg-half-n-half-horizontal:after {
        opacity: 1;
        transform: translateX(0);
        transition-duration: 1.2s;
        transition-delay: 0s;
      }
      .container-hero-image {
        opacity: 1;
        transition-duration: .8s;
        transition-delay: .1s;
      }
    }
  }
} // end flickity-carousel-home-hero

img.flickity-lazyload {
  opacity: 0;
  transition: opacity .4s ease;
  &.flickity-lazyloaded {
    opacity: 1;
  }
}
.lt-ie10 {
  .flickity-prev-next-button,
  .flickity-page-dots {
    display: none;
  }
}

// add this class to empty elements at beginning and end to get spacing between cells and edge of container
.flickity-pad {
  width: 16px;
  @media(min-width:$screen-sm) {
    width: 40px;
  }
}