@use '../../colors';
@use '../../breakpoints';


.bz-carousel {
    overflow: hidden;
    width: 100%;
    margin: 0 auto;
    position: relative;
    margin: 0 0 -5px 0;
    .bz-carousel-inner {
      position: absolute;
      top: auto;
      bottom: 22% !important;
      left: 0;
      right: 0;
      .bz-carousel-text { 
        margin: auto;
        padding: 0 70px;
        max-width: 75%;
      }
    }
    .bz-carousel-inner--right {
      text-align: right;
      .bz-carousel-text { 
        margin-left: auto;
        margin-right: 0;
        padding: 0 70px;
        max-width: 75%;
      }
    }
    .bz-trunk {
      margin: auto;
    }
    &.loading {
      min-height: 500px;
      background-color: colors.$neutral-7;
      .slide-wrapper {
        display: none;
      }
    }
  }
  
  .slide-wrapper {
    width: calc(100% * 5);
    //animation: slide 18s ease infinite;
  }
  
  .slide {
    position: relative;
    float: left;
    width: calc(100% / 5);
  }

  .slide-inner {
    padding: 32px 80px;
    padding-bottom: 100px;
  }

  .slideshow--preview-3-col {
    .slide{
      opacity: 0.4;
      padding: 0 10px;
      &--selected {
        opacity: 1;
      }
    }
    .slideshow-navigator {
      text-align: center;
    }
  }
  .slideshow {
    .slideshow--preview-3-col {
      .slide-wrapper {
        margin-left: 33%;
      }
    }
  }

  .slideshow-prev {
    content: '<';
    background-color: colors.$pink-100;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 16px;
    margin: auto;
    z-index: 6;
    cursor: pointer;
    border: 1px solid colors.$white;
    &:before {
      position: absolute;
      content: "";
      border: solid colors.$white;
      border-width: 2px 2px 0 0;
      padding: 5px;
      left: 16px;
      top: 15px;
      transform: rotate(-135deg);
      -webkit-transform: rotate(-135deg);
    }
    &:hover {
      background-color: colors.$pink-80;
    }
  }
  .slideshow-next {
    content: '>';
    background-color: colors.$pink-100;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    position: absolute;
    top: 0;
    right: 16px;
    bottom: 0;
    margin: auto;
    z-index: 6;
    border: 1px solid colors.$white;
    cursor: pointer;
    &:before {
      position: absolute;
      content: "";
      border: solid colors.$white;
      border-width: 0 0 2px 2px;
      padding: 5px;
      right: 16px;
      top: 15px;
      transform: rotate(-135deg);
      -webkit-transform: rotate(-135deg); 
    }
    &:hover {
      background-color: colors.$pink-80;
    }
  }


  .slideshow-bottom {
    position: absolute;
    bottom: 40px;
    margin-top: 16px;
    width: 100%;
    .slideshow-navigator-item {
      display: inline-block;
      width: 10px;
      height: 10px;
      background-color: colors.$neutral-4;
      transition: width 1s;
      border-radius: 100px;
      + .slideshow-navigator-item {
        margin-left: 8px;
      }
      &--selected {
        background-color: colors.$pink-100;
        width: 71px;
        transition: width 1s;
      }
    }
  }

  .bz-img-mask {
    position: relative;
    &::before {
      position: absolute;
      content: "";
      width: 100%;
      height: 100%;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.0001) 0%, #FFFFFF 100%);
      background: linear-gradient(180deg, rgba(21, 24, 26, 0.0001) 0%, #15181A 100%);      }
  }


  @media (max-width: breakpoints.$desktop) {
    .bz-carousel {
        .bz-carousel-text { 
          max-width: 100% !important;
          padding: 0 !important;
          margin: auto;
        }
        .bz-carousel-inner {
            top: 22%;
            margin: auto;
            display: flex; 
            align-items: center;
        }
        .bz-trunk-navigator {
          text-align: center;
          width: auto;
        }
    }
}