Carousels

@mixin carousel-dots($inverse: false) { // ul
  margin-top: $base-spacing-medium;
  line-height: 0;
  text-align: center;

  li {
    display: inline-block;
    list-style-type: none;
    outline: 0;
    line-height: 0;
  }

  button {
    width: $carousel-dot-size;
    height: $carousel-dot-size;
    outline: 0;
    border: 0;
    border-radius: 50%;
    margin: 0 $carousel-dot-spacing;
    background-color: $inactive-carousel-button-color;
    opacity: $inactive-carousel-button-opacity;
    font-size: 0;

    &:hover,
    &:active,
    &:focus {
      background-color: $active-carousel-button-color;
      opacity: $active-carousel-button-opacity;
    }
  }

  & .slick-active button {
    background-color: $active-carousel-button-color;
    opacity: $active-carousel-button-opacity;
  }

  @if $inverse == true {
    // Override and invert dot colors for dark backgrounds
    button {
      background-color: $inverse-inactive-carousel-button-color;
      opacity: $inverse-inactive-carousel-button-opacity;

      &:hover,
      &:active,
      &:focus {
        background-color: $inverse-active-carousel-button-color;
        opacity: $inverse-active-carousel-button-opacity;
      }
    }

    & .slick-active button {
      background-color: $inverse-active-carousel-button-color;
      opacity: $inverse-active-carousel-button-opacity;
    }
  }
}

@mixin carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: z($z-context, page_content, $page_content, carousel__arrow);
  color: $inactive-carousel-button-color;
  font-size: $direction-arrow-size;
  cursor: pointer;

  &:hover,
  &:active,
  &:focus {
    color: $active-carousel-button-color;
  }

  @media only screen and (max-width: $medium-screen-max) {
    margin-left: $base-margin;
    margin-right: $base-margin;
  }

  @media only screen and (max-width: $small-screen-max) {
    display: none;
  }

  &--left {
    left: 0;
  }

  &--right {
    right: 0;
  }
}

@mixin resource-carousel-arrow($arrow-z-index: 1) {
  z-index: $arrow-z-index;
  color: $inactive-carousel-button-color;
  font-size: $resource-arrows;
  cursor: pointer;
  border: 1px solid $inactive-carousel-button-color;
  text-align: center;
  line-height: $carousel-arrow-size - 0.125em; // vertically centers arrows
  height: $carousel-arrow-size;
  width: $carousel-arrow-size;

  &:hover,
  &:active,
  &:focus {
    color: $active-carousel-button-color;
    border: 1px solid $active-carousel-button-color;
  }

  &--left {
    margin-right: 1px;
  }
}

@mixin resource-continue-block {
  border-top: $base-border;
  border-color: $resources__carousel-continue__border;
  background-color: $resources__carousel-continue__background;
  padding-left: 1em;
  font-size: $base-font-size;
  font-weight: $font-weight-bold;
  position: absolute;
  bottom: 0;
  display: flex;
  align-items: center;
  height: $resource-continue-block-size;
  width: 100%;

  &::after {
    font-family: FontAwesome;
    content: '\f054';
    font-size: $base-font-size;
    color: $inactive-carousel-button-color;
    float: right;
    position: absolute;
    right: 0;
    top: 20%;
    margin-right: 0.5em;
  }

  &:hover,
  &:active,
  &:focus {
    background-color: $resources__carousel-continue__background--hover;

    &::after {
      color: $grey-dark;
    }
  }

  @media only screen and (max-width: $medium-screen-max) {
    font-size: $base-font-size;

    &::before, &::after {
      font-size: $resource-continue-block-icon;
    }
  }
}

@mixin carousel-wrap {
  margin: auto;
  padding: 0 calc(#{$base-padding} + #{$direction-arrow-size});

  @media only screen and (max-width: $small-screen-max) {
    padding: 0;
  }
}

// Product Buy Pages Carousel (Why Post and Why Search)
@mixin product__carousel__item-wrap {
  @include carousel-wrap;

  .slick-list {
    @media only screen and (max-width: $small-screen-max) {
      background-color: $panel-primary;
    }
  }
}

@mixin product__carousel__item {
  position: relative;
  outline: 0;

  @media only screen and (max-width: $small-screen-max) {
    padding: $base-padding;
  }

  &:hover,
  &:active,
  &:focus {
    text-decoration: none;
  }

  h3 {
    margin-bottom: 0;
    font-size: $base-font-size;
    font-weight: $font-weight-bold;
  }
}

// Testimonial Carousels
@mixin testimonial__carousel__item-container {
  @include media__item(400px, $medium-screen-max);
  @include justify-content(center);
  @include align-items(center);

  @media only screen and (max-width: $medium-screen-max) {
    img {
      display: inline;
    }
  }
}

@mixin testimonial__carousel__item {
  position: relative;
  outline: 0;

  &:hover,
  &:active,
  &:focus {
    text-decoration: none;
  }

  span {
    color: $text-color-grey;
  }
}

@mixin testimonial__carousel__logo {
  @media only screen and (min-width: $medium-screen-max) {
    padding-right: $base-padding;
    width: 130px;
    @include flex-grow(0);
    @include flex-shrink(0);
    @include flex-basis(auto);
  }

  img {
    // Safari 9 fixes for preserving image aspect ratio
    max-width: 100%;
    max-height: 100%;
  }
}

@mixin testimonial__carousel__copy {
  @media only screen and (min-width: $medium-screen-max) {
    border-left: $vertical-rule-width solid white;
    padding-left: $base-padding;
  }

  p {
    margin-bottom: 0;
    color: white;
  }
}

@mixin logos-carousel($logo-width: 10em, $logo-height: 4.375em) {
  // padding-bottom: $base-padding;

  .slick-track {
    display: flex;
    align-items: center;

    img {
      margin: auto;
      max-width: $logo-width;
      max-height: $logo-height;
    }
  }

  @media only screen and (max-width: $small-screen-max) {
    img {
      width: 80%;
    }
  }
}