@use '../../sass/abstracts/variables' as *;
@use '../../sass/abstracts/mixins';
@use './swiper';

#{$component-prefix}carousel {
  /*
Style for swiper
*/
  .swiper {
    &-button-prev,
    &-button-next {
      color: #fff;
      &:after {
        font-size: 32px;
        font-weight: bold;
      }

      @include mixins.media-breakpoint-down(lg) {
        display: none;
      }
    }

    &-pagination {
      &-bullet {
        width: 14px;
        height: 14px;
        opacity: 1;
        background-color: $sodra-black-40;
        &-active {
          background-color: $sodra-green;
        }
      }
    }
  }

  &--multiple-items {
    .swiper {
      &-pagination {
        position: static;
        display: inline;
        width: initial;
        margin: 0 1rem;
      }

      &-button-prev,
      &-button-next {
        position: static;
        display: inline-block;
        color: $blue;
        height: auto;
        &:after {
          font-size: 18px;
        }
      }
    }

    #{$component-prefix}carousel {
      &__navigation {
        display: block;
        text-align: center;
        margin: 1.5rem 0;
      }
    }
  }

  #{$component-prefix}banner,
  .u-margin-bottom {
    margin-bottom: 0 !important;
  }

  &--has-progress-bar {
    .swiper {
      &-button-prev,
      &-button-next {
        display: none;
      }

      &-pagination {
        display: flex;
        flex: 1 1 0px;
        margin: 0;
        background-color: $white;
        border: 1px solid $sodra-black-50;
        height: 12px;
        border-radius: 6px;
        overflow: hidden;

        &-bullet {
          flex-grow: 1;
          height: 11px;
          margin: 0 !important;
          border-radius: 6px;
          background: transparent;
          transition: background-color 0.3s;
          position: relative;
          &-active {
            background-color: $sodra-black-75;
          }
        }
      }
    }

    .c-card {
      margin-bottom: 0.5rem;

      @include mixins.media-breakpoint-up(sm) {
        margin-bottom: 2rem;
      }
    }
  }

  &--has-part-width-slides {
    width: calc(100% + 1.25rem) !important;

    .swiper {
      &-pagination {
        width: calc(100% - 1.25rem) !important;
      }
      &-slide {
        opacity: 0.5;
        transition: opacity 0.3s;
      }

      &-slide-prev,
      &-slide-active {
        opacity: 1;
      }

      @include mixins.media-breakpoint-up(sm) {
        &-slide-next {
          opacity: 1;
        }
      }
    }
  }
}

.swiper-thumbnails {
  height: 20%;
  box-sizing: border-box;
  padding: 10px 0;

  .swiper-slide {
    width: 25%;
    height: 100%;
    opacity: 0.5;
    border: 1px solid transparent;

    figure,
    figcaption {
      margin: 0 !important;
    }
  }

  .swiper-slide-thumb-active {
    opacity: 1;
    border-color: $sodra-black;
  }
}