.et-slider {
  overflow: hidden;

  &:not(.slick-initialized) {
    // This is very important to prevent CLS, we hide everything but the first slide
    .et-slider-slide:not(:first-child) {
      display: none;
    }
    // Hide Slider navigation until it is initialized
    ~ .et-slider-nav {
      display: none;
    }
  }

  // navigation bubbles
  &-bottom-nav,
  &-top-nav {
    .slick-dots {
      flex: 0 0 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 0;
      line-height: 0;
      padding: 0;
      height: $spacer;
      width: 100%;
      margin: 0;

      li {
        margin: 0 10px;
        list-style-type: none;

        button {
          width: 12px;
          height: 12px;
          padding: 0;
          border-radius: 50%;
          border: 1px solid color-yiq($colorContentBackground);
          background-color: transparent;
          transition: $transition-base;
        }

        &.slick-active button {
          background-color: color-yiq($colorContentBackground);
        }
      }
    }
  }
  &-bottom-nav {
    .slick-dots {
      margin-top: 20px;
    }
  }
  &-top-nav {
    .slick-dots {
      margin-bottom: 20px;
    }
  }

  // Slider Arrows
  &-nav {
    .slick-arrow {
      background-color: unset;
      cursor: pointer;
      font-size: 17px;
      transition: all .3s ease-in;
      padding: 0;

      @include media-breakpoint-up(md) {
        font-size: 20px;
      }

      @include media-breakpoint-up(lg) {
        font-size: 25px;
      }

      @include media-breakpoint-up(xl) {
        font-size: 30px;
      }

      &:hover {
        color: inherit;
        background: inherit;
      }

      &.enabled {
        opacity: 1;
      }
    }

    &-next {
      right: 5px;
      transform: translate(50%, -50%);

      @include media-breakpoint-up(sm) {
        right: 5px;
      }

      @include media-breakpoint-up(md) {
        right: -10px;
      }

      @include media-breakpoint-up(lg) {
        right: -20px;
      }

      @include media-breakpoint-up(xl) {
        right: -40px;
      }
    }

    &-prev {
      left: 5px;
      transform: translate(-50%, -50%);

      @include media-breakpoint-up(sm) {
        left: 5px;
      }

      @include media-breakpoint-up(md) {
        left: -10px;
      }

      @include media-breakpoint-up(lg) {
        left: -20px;
      }

      @include media-breakpoint-up(xl) {
        left: -40px;
      }
    }

    // On Fluid containers, the arrows may not be outside of the container / screen
    .container-fluid & {
      &-next {
        right: 5px;
        transform: translate(50%, -50%);

        @include media-breakpoint-up(sm) {
          right: 10px;
        }

        @include media-breakpoint-up(md) {
          right: 10px;
        }

        @include media-breakpoint-up(lg) {
          right: 20px;
        }

        @include media-breakpoint-up(xl) {
          right: 40px;
        }
      }

      &-prev {
        left: 5px;
        transform: translate(-50%, -50%);

        @include media-breakpoint-up(sm) {
          left: 10px;
        }

        @include media-breakpoint-up(md) {
          left: 10px;
        }

        @include media-breakpoint-up(lg) {
          left: 20px;
        }

        @include media-breakpoint-up(xl) {
          left: 40px;
        }
      }
    }
  }
}
/*
.gallery-with-action.fullscreen {
  .et-slider-bottom-nav {
    .slick-dots {
      margin-top: 5px;
      margin-bottom: 10px;
    }
  }
  .et-slider-top-nav {
    .slick-dots {
      margin-top: 0;
      margin-bottom: 10px;
    }
  }
}
 */

// make arrow navigations position themselves correctly on all sliders
.slick-slider-other {
  position: relative;
}

// pushed success forces the left/right positions to not be offset beyond the bounds of the container
#pushed-success {
  // Push Success - XSelling Slider
  .et-product-slider-slider {
    padding: 0 rem(10px);
  }

  .et-slider-nav-prev {
    left: 5px;
  }

  .et-slider-nav-next {
    right: 5px;
  }
}