$slider-max-width: $site-max-width !default;
$slider-background-color: $dune !default;
$slider-text-color: $light !default;

.c-slider {
  overflow: hidden;
  max-width: $slider-max-width;
  background: $slider-background-color;
  color: $slider-text-color;
}

.c-slider__picture {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;

  .c-slider__image {
    position: absolute;
    top: 50%;
    right: 0;
    bottom: 0;
    left: 0;
    transform: translateY(-50%) scale(1.0125);
  }
}

.c-slider__content {
  position: relative;
  z-index: 1;
  height: 10rem;
}

.c-slider__text {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: $spacer;
  color: $light;
}

.c-slider__slide {
  position: relative;
  display: none;
  height: 100%;

  &::before {
    display: block;
    width: 100%;
    padding-bottom: 41.55%;
    content: '';
  }

  &.is-active {
    display: block;
  }

  &.is-active--next {
    .c-slider__picture {
      .c-slider__image {
        animation: slider-background-next 0.5s;
      }
    }

    .c-slider__text {
      animation: slider-content-next 0.5s;
    }
  }

  &.is-active--previous {
    .c-slider__picture {
      .c-slider__image {
        animation: slider-background-previous 0.5s;
      }
    }

    .c-slider__text {
      animation: slider-content-previous 0.5s;
    }
  }
}

.c-slider__controls {
  display: flex;
  padding: ($spacer / 2);
  color: $slider-text-color;
}

.c-slider__previous,
.c-slider__next {
  cursor: pointer;

  .o-icon {
    fill: $slider-text-color;
  }
}

.c-slider__pips {
  display: flex;
  align-content: center;
  justify-content: center;
}

.c-slider__pip {
  position: relative;
  top: 50%;
  width: 10px;
  height: 10px;
  margin: 0 $spacer;
  border: 2px solid $slider-text-color;
  border-radius: 2px;
  cursor: pointer;
  transform: translateY(-50%);

  &.is-active {
    background: $slider-text-color;
  }
}

.c-slider--scroll {
  overflow: hidden;

  .c-slider__slides {
    display: flex;
    flex-wrap: nowrap;
  }

  .c-slider__slide {
    display: block;
    height: auto;
    padding: 0 $spacer;
  }
}

@include md {
  .c-slider__content {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 100%;
  }
}