.element-image-slider {
  .slider {
    border-radius: var(--ns-radius, 20px);
    overflow: hidden;
  }

  .slider-vertical {
    .swiper-slide:not(.swiper-slide-active) {
      .thumbnail {
        opacity: 0;
      }
    }

    .swiper-slide-active {
      .item-inner {
        transform: translateY(0);
      }
    }

    .slider-pagination {
      .swiper-pagination-bullet-active {
        background-color: #fff;
      }
    }
  }

  .slider-item {
    position: relative;
    border-radius: var(--ns-radius, 20px);
    overflow: hidden;
    height: 400px;

    .item-image {
      position: absolute;
      width: 100%;
      left: 0;
      right: 0;
      background-color: #eee;
      background-size: cover;
      height: 100%;
      margin: 0;


      &--align-left {
        margin-right: auto;
      }

      &--align-right {
        margin-left: auto;
      }

      &--align-center {
        margin-left: auto;
        margin-right: auto;
      }

      &--align-top {
        top: 0;
      }

      &--align-middle {
        top: 50%;
        transform: translateY(-50%);
      }

      &--align-bottom {
        bottom: 0;
      }


      &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: transparent;
      }
    }

    .item-link {
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      z-index: 1;
    }

    .item-inner {
      position: absolute;
      top: 50%;
      left: 0;
      right: 0;
      width: 100%;
      color: #fff;
      transform: translateY(-50%);
      z-index: 2;


      &--align-left {
        margin-right: auto;
      }

      &--align-right {
        margin-left: auto;
      }

      &--align-center {
        margin-left: auto;
        margin-right: auto;
      }

      &--align-top {
        top: 0;
        transform: none;
      }

      &--align-middle {
        top: 50%;
        transform: translateY(-50%);
      }

      &--align-bottom {
        transform: none;
        bottom: 0;
        top: auto;
      }

      .item-title {
        font-size: 2.2rem;
        transition: 0.2s;
        transition-delay: 0.2s;
      }

      .item-description {
        font-size: 1rem;
        transition: 0.2s;
        transition-delay: 0.4s;

        * {
          color: inherit;
        }
      }

      .item-buttons {
        position: relative;
        z-index: 2;
        transition: 0.2s;
        transition-delay: 0.6s;
      }
    }
  }


  .swiper-slide:not(.swiper-slide-active) .item-inner {
    .item-buttons {
      transform: translateY(30px);
      opacity: 0;
    }

    .item-title {
      transform: translateY(-30px);
      opacity: 0;
    }

    .item-description {
      opacity: 0;
    }
  }


  .slider-pagination {
    .swiper-pagination-bullet {
      width: 15px;
      height: 15px;
      transition: 0.2s;
      position: relative;
      overflow: hidden;
    }

    .custom-pagination-item span {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-size: cover !important;
    }

    .swiper-pagination-bullet-active {
      background-color: var(--ns-primary);
    }
  }

  .pagination-custom-templates ~ .swiper-pagination {
    .swiper-pagination-bullet {
      opacity: 1;

      &:not(.swiper-pagination-bullet-active) {
        filter: grayscale(0.7);
      }
    }
  }
}

.slider {
  --slider-padding-md: 15px;

  &-buttons {
    position: absolute;
    transform: translateY(-50%);
    top: 50%;
    width: 100%;
    max-width: 100vw;
    padding: var(--slider-padding-md);
    z-index: 1;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: space-between;

    --slider-button-width: 60px;
    --slider-button-height: 60px;

    &--compact {
      display: flex;
      width: auto;
      gap: 1rem;

      .slider-button {
        position: static;
        margin: 0 !important;
        transform: none !important;
      }
    }

    &--align-top {
      top: 0;
      transform: none;
    }

    &--align-bottom {
      transform: none;
      bottom: 0;
      top: auto;
    }

    &--align-left {
      left: 0;
      right: auto;
    }

    &--align-right {
      left: auto;
      right: 0;
    }

    &--align-center {
      left: 50%;
      transform: translateX(-50%);
    }

    &--outside {
      &.slider-buttons {
        &--align-top {
          transform: translate(-50%, -100%);
          padding-left: 0;
          padding-right: 0;

          &.slider-buttons--align-left {
            transform: translate(0, -100%);
          }

          &.slider-buttons--align-right {
            transform: translate(0, -100%);
          }
        }

        &--align-middle {
          &.slider-buttons--align-center {
            transform: translate(-50%, -50%);
          }
        }

        &--align-bottom {
          transform: translate(-50%, 100%);
          padding-left: 0;
          padding-right: 0;

          &.slider-buttons--align-left {
            transform: translate(0, 100%);
          }

          &.slider-buttons--align-right {
            transform: translate(0, 100%);
          }
        }

        &.slider-buttons--expanded {
          &.slider-buttons--align-top {
            transform: translateY(-100%);
          }

          &.slider-buttons--align-bottom {
            transform: translateY(100%);
          }

          &.slider-buttons--align-middle {
            padding: 0;
            width: calc(100% + calc(var(--slider-button-width) * 2));
            transform: translate(-50%, -50%);
            left: 50%;
          }
        }
      }
    }

    .slider-button {
      display: flex;
      align-items: center;
      justify-content: center;
      width: var(--slider-button-width);
      height: var(--slider-button-height);
      position: static;
      background: #fff;
      border-radius: var(--ns-radius);
      color: #222;
      font-size: 1.4rem;
      z-index: 1;
      transition: 0.2s;
      pointer-events: all;
      transform: none;
      margin: 0;

      &:hover {
        background: #fff;
        opacity: 1;
      }

      &:after {
        display: none;
      }

      &:before {
        font-size: 1.3rem;
        transition: 0.2s;
      }

      &--next:before {
        font-family: "Font Awesome 5 Pro", Serif;
        content: '\f105';
        font-weight: 500;
      }

      &--prev:before {
        font-family: "Font Awesome 5 Pro", Serif;
        font-weight: 500;
        content: '\f104';
      }

      &--fade-more {
        margin-top: 0 !important;
        background: linear-gradient(to right, #fff, transparent);
        top: 0;
        bottom: 0;
        left: 0;
        height: auto;
        width: 100px;
        pointer-events: none;

        &--right {
          background: linear-gradient(to left, #fff, transparent);
          left: auto;
          right: 0;
        }

        .button {
          pointer-events: auto;
        }

        &:before {
          display: none;
        }
      }

      &.swiper-button-disabled {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
      }
    }
  }

  &-pagination {
    width: auto !important;
    padding: 2rem;
    transform: none !important;
    bottom: auto !important;


    &--align-left {
      left: 0 !important;
      right: auto !important;
    }

    &--align-right {
      left: auto !important;
      right: 0 !important;
    }

    &--align-center {
      left: 50% !important;
      transform: translateX(-50%) !important;
    }

    &--align-top {
      top: 0 !important;
    }

    &--align-middle {
      top: 50% !important;
      transform: translateY(-50%) !important;
      bottom: auto !important;

      &.slider-pagination--align-center {
        transform: translate(-50%, -50%) !important;
      }
    }

    &--align-bottom {
      bottom: 0 !important;
      top: auto !important;
    }


    &--outside {
      &.slider-pagination--align-bottom {
        top: auto !important;
        bottom: 0 !important;
        transform: translateY(100%) !important;

        &.slider-pagination--align-center {
          transform: translate(-50%, 100%) !important;
        }

        &.slider-pagination--align-right {
          transform: translate(0, 100%) !important;
        }

        &.slider-pagination--align-left {
          transform: translate(0, 100%) !important;
        }
      }

      &.slider-pagination--align-top {
        top: 0 !important;
        bottom: auto !important;
        transform: translateY(-100%) !important;

        &.slider-pagination--align-center {
          transform: translate(-50%, -100%) !important;
        }

        &.slider-pagination--align-right {
          transform: translate(0, -100%) !important;
        }

        &.slider-pagination--align-left {
          transform: translate(0, -100%) !important;
        }
      }
    }

  }
}

.slider-container {
  position: relative;

  .swiper {
    overflow: hidden;

    &.overflow-visible {
      overflow: visible;
    }
  }
}

.swiper-pagination-bullet-active {
  background-color: var(--ns-primary);
}

.swiper-pagination {
  z-index: 1 !important;
}

.swiper:not(.swiper-initialized):not(.swiper-container-initialized) {
  height: 300px;
  background-color: #f5f5f5;
  animation: fade 1s infinite linear;
  -webkit-animation: fade 1s infinite linear;
  border-radius: var(--ns-radius);

  * {
    opacity: 0;
    visibility: hidden;
  }
}

.rtl {
  .slider-buttons {
    .slider-button--prev:before {
      content: "\f105";
    }

    .slider-button--next:before {
      content: "\f104";
    }
  }
}

.thumbnail-slider {
  margin-top: 30px;

  .thumb-item {
    display: flex;
    gap: 10px;
    align-items: center;
    background: #f5f5f5;
    padding: 10px;
    border-radius: var(--ns-radius);
    cursor: pointer;
    opacity: 0.8;
    transition: 0.2s;

    .thumb-image {
      max-width: 50px;
      width: 100%;
      height: 50px;
      border-radius: var(--ns-radius);
      overflow: hidden;
    }

    .thumb-title {
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      color: #454545;
    }
  }

  .swiper-slide {
    width: 100%;
    max-width: 230px;
  }

  .swiper-slide-thumb-active {
    .thumb-item {
      opacity: 1;
      background: #fff;
    }
  }
}