@include portal-type-font-awesome-icon(ftw-slider-container, caret-square-o-right);
@include portal-type-font-awesome-icon(ftw-slider-pane, caret-square-o-right);

#slider-wrapper {
  margin-bottom: $margin-vertical;
}

.slick-slider {
  > button {
    @extend .fa-icon;
    @include auto-text-color($color-content-background);
    border-radius: $border-radius-primary;
    background-color: $color-content-background;
    min-width: $line-height-base;
    min-height: $line-height-base;
    padding: 0;
    margin: 0;

    &:before {
      font-size: $font-size-base;
      vertical-align: middle;
    }

    &.slick-next {
      @extend .fa-chevron-right;
      position: absolute;
      right: $padding-vertical;
      top: 50%;
      margin-top: - $line-height-base;
    }
    &.slick-prev {
      @extend .fa-chevron-left;
      position: absolute;
      left: $padding-vertical;
      top: 50%;
      margin-top: - $line-height-base;
    }
    &.slick-play {
      @extend .fa-play;
      position: absolute;
      top: $padding-vertical;
      left: $padding-vertical;
    }
    &.slick-pause {
      @extend .fa-pause;
      position: absolute;
      top: $padding-vertical;
      left: $line-height-base + $padding-vertical * 2;
    }
  }
}

.slick-dots {
  @include list-horizontal();
  text-align: center;
  padding: $padding-vertical $padding-horizontal;

  > li {
    display: inline-block;
    float: none;

    &.slick-active {
      > button {
        @include label-round($color-secondary);
        margin-right: $line-height-base / 2;
        font-size: 1em;
      }
    }

    > button {
      @include label-round();
      margin-right: $line-height-base / 2;
      font-size: 1em;
    }
  }

}

.sliderPane {
  position: relative;
  margin-right: $margin-horizontal;

  &:last-child {
    margin-right: 0;
  }
}

.slider-link {
  &:hover {
    text-decoration: none;
  }

  &:before {
    position: absolute;
    background: linear-gradient(-45deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 50%, white 50%, white);
    top: 0;
    left: 0;
    padding: 5px 30px 30px 5px;
    border-left: 1px solid #eaeaea;
    border-top: 1px solid #eaeaea;
  }
}

.OnlyPane .sliderPane {
  margin: 0;
}

.sliderText {
  padding: $padding-vertical $padding-horizontal;
  position: absolute;
  bottom: $line-height-base;
  left: $line-height-base;
  right: 30%;
  background-color: $color-content-background;

  > p {
    font-size: $font-size-base;

    &.title {
      font-family: $font-family-heading;
      font-weight: $font-weight-heading;
      font-size: $font-size-h2;
      margin-bottom: $margin-heading-vertical;
    }
  }
}

.arrowsOnHover {
  > button {
    &.slick-next, &.slick-prev {
      display: none;
    }
  }
  &:hover {
    > button {
      display: block;
    }
  }
}
