/**
 * @file
 * Carousel
 *
 * Contains styles for carousel object.
 */

.carousel {

  //## TODO swap background image to section image
  background-image: url("../assets/img/banner-image.jpg");
  margin: 0 -1rem;
  padding: 2rem 1.25rem;
  color: $color-white;

  a {
    color: $color-green-light;
    &:before {
      background-color: $color-green-light;
    }

    &:focus {
      @include focus-light();
    }

    &:hover {
      color: $color-white;
      &:before {
        background-color: $color-white;
      }
    }
  }

  @media (min-width: $break-medium) {
    margin: 0 -3.125rem;
    padding: 5rem 3.125rem;
  }

  @media (min-width: $break-large) {
    margin: 0;
    padding: 5rem 0;
    background-image: none;
    position: relative;

    &:before {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 100vw;
      height: 100%;
      display: block;
      background-image: url("../assets/img/banner-image.jpg");
      background-size: cover;
      background-color: #27003F;
      margin-left: -18.55%;
      z-index: -2;
    }

    @media (min-width: $break-x-large) {
      &::before {
        margin-left: -145px;
      }
    }
  }

  &__header {
    h2 {
      margin: 0;
    }
  }

  &__intro {
    margin: 1rem 0;
    line-height: 1.52;

    @media (min-width: $break-medium) {
      margin: 1rem 0 2rem;
    }
  }

  &__img {

    a {
      display: block;

      &:focus {
        outline-color: $color-white;
        outline-offset: -6px;
      }
    }

    a:before {
      display: none;
    }

    img {
      aspect-ratio: 280/158;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }
  }

  &__caption {
    width: 100%;
    bottom: 0;
    @include fontsize(16px);
    line-height: 1.52;
    padding: 1.25rem;

    @media (min-width: $break-medium) {
      padding: 1.5rem;
      line-height: 1.6;
    }

    @media (min-width: $break-large) {
      @include fontsize(18px);
    }
  }

  .slick-track {
    display: flex;
  }

  .slick-slide {
    display: block;
    height: auto;
    border: 1px solid $color-white;

    img {
      height: 100%;
      object-fit: cover;
      object-position: center;
      border-bottom: 1px solid $color-white;
    }

    @media (min-width: $break-medium) {
      width: 100% !important;
      border: 3px solid $color-white;

      img {
        border-bottom: 3px solid $color-white;
      }
    }
  }

  &__buttons {
    display: flex;
    justify-content: space-between;
    position: relative;
    margin-top: 1.5rem;

    @media (min-width: $break-medium) {
      margin-top: 2.313rem;
    }

    @media (min-width: $break-large) {
      margin-top: 1.688rem;
      margin-right: 1.313rem;
    }

    &:before {
      content: '';
      position: absolute;
      top: -1.5rem;
      left: calc(50% - 1px);
      height: 2.2rem;
      width: 2px;
      background-color: $color-white;

      @media (min-width: $break-medium) {
        width: 3px;
        top: -2.5rem;
        left: calc(50% - 2px);
        height: 3.75rem;
      }

      @media (min-width: $break-large) {
        top: -1.7rem;
        height: 3.125rem;
      }
    }

    &:after {
      content: '';
      position: absolute;
      width: 10px;
      height: 10px;
      top: 11px;
      left: calc(50% - 6.5px);
      border: 2px solid $color-white;
      background-color: $color-green-dark;
      border-radius: 100%;
      z-index: 5;

      @media (min-width: $break-medium) {
        width: 15px;
        height: 15px;
        top: 10px;
        left: calc(50% - 9.5px);
      }

      @media (min-width: $break-large) {
        border: 3px solid $color-white;
        top: 8px;
        left: calc(50% - 11.5px);
        width: 18px;
        height: 18px;

      }
    }

    button.slick-arrow {
      position: relative;
      transform: none;
      overflow: visible;
    }
  }

  .prevArrow:before {
    content: "";
    position: absolute;
    width: calc(50vw - 67px);
    height: 2px;
    background-color: $color-white;
    border-radius: 4px;
    color: white;
    top: 17px;
    z-index: 0;
    left: 52px;

    @media (min-width: $break-medium) {
      width: calc(50vw - 110px);
      height: 3px;
      top: 20px;
    }

    @media (min-width: $break-large) {
      width: calc((100vw - 185px) / 2 - 160px);
      top: 22px;
      left: 65px;
    }

    @media (min-width: $break-x-large) {
      width: calc((100vw - 280px) / 2 - 160px);
      left: 65px;
    }

    @media (min-width: 1800px) {
      width: 600px;
    }
  }

  .nextArrow:before {
    content: '';
    position: absolute;
    width: calc(50vw - 67px);
    height: 2px;
    background-color: $color-white;
    border-radius: 4px;
    top: 18px;
    z-index: 0;
    right: 54px;

    @media (min-width: $break-medium) {
      width: calc(50vw - 110px);
      height: 3px;
      top: 20px;
      right: 63px;
    }

    @media (min-width: $break-large) {
      width: calc((100vw - 185px) / 2 - 160px);
      top: 22px;
      right: 65px;
    }

    @media (min-width: $break-x-large) {
      width: calc((100vw - 280px) / 2 - 160px);
      right: 65px;
    }

    @media (min-width: 1800px) {
      width: 600px;
    }
  }
}