.et-widget-mainslider {
  .et-main-slider-slide-content {
    position: relative;
    border-radius: $border-radius;
    overflow: hidden;
  }

  .et-main-slider-with-timer .et-main-slider-slide-content {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

  .et-slider-timer {
    border-radius: 0 0 $border-radius $border-radius;
  }

  .et-main-slider-no-padding {
    .et-main-slider-slide-content {
      border-radius: 0;
    }

    .et-slider-timer {
      border-radius: 0;
    }
  }

  .et-main-slider-auto-height {
    .et-main-slider-slide-content {
      img {
        height: auto;
        width: 100%;
      }

      // Needed to override above styles
      .et-main-slider-slide-logo img {
        height: auto;
        width: auto;
        max-width: 100%;
        max-height: 40px; // Fallback if lh is unknown
        max-height: 2lh;
      }
    }
  }

  .et-main-slider-size-fullsizeImage {
    .et-main-slider-slide-container-wrapper {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;

      .et-main-slider-slide-container {
        position: relative;
        height: 100%;
        width: 100%;
        padding-right: $grid-gutter-width / 2;
        padding-left: $grid-gutter-width / 2;
        margin-right: auto;
        margin-left: auto;

        @each $breakpoint, $container-max-width in $container-max-widths {
          @include media-breakpoint-up($breakpoint, $grid-breakpoints) {
            max-width: $container-max-width;
          }
        }
      }
    }
  }

  .et-main-slider:not(.slick-initialized) {
    max-height: 400px;
    @include media-breakpoint-up(sm) {
      max-height: 350px;
    }
    @include media-breakpoint-up(xl) {
      max-height: 375px;
    }
    overflow: hidden;
  }

  .et-main-slider-fixed-height {
    .et-main-slider-slide-content {
      height: 400px;
      @include media-breakpoint-up(sm) {
        height: 350px;
      }
      @include media-breakpoint-up(xl) {
        height: 375px;
      }

      img {
        height: 100%;
        width: 100%;
        object-fit: cover;
      }

      // Needed to override above styles
      .et-main-slider-slide-logo img {
        height: auto;
        width: auto;
        max-width: 100%;
        max-height: 40px; // Fallback if lh is unknown
        max-height: 2lh;
      }
    }
  }


  .et-main-slider-slide-logo {
    margin-bottom: $grid-gutter-width;
    img {
      display: inline-block;
      height: auto;
      width: auto;
      max-width: 100%;
      max-height: 40px; // Fallback if lh is unknown
      max-height: 2lh;
    }
  }

  .et-main-slider-slide-positioner {
    color: $colorFontLight;

    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    display: flex;

    padding: 20px;
    @include media-breakpoint-up(sm) {
      padding: 30px;
    }
    @include media-breakpoint-up(lg) {
      padding: 40px;
    }
  }

  /* Prevents overlap of the backdrop with potential slider arrows */
  .et-main-slider-size-fullsize .et-main-slider-slide-positioner {
    @include media-breakpoint-up(xl) {
      padding: 40px 80px;
    }
  }

  /* Aligns backdrop with content on fullsizeImage containers */
  .et-main-slider-size-fullsizeImage .et-main-slider-slide-positioner {
    @include media-breakpoint-up(xl) {
      padding: 40px 0;
    }
  }

  .et-main-slider-slide-backdrop {
    border-radius: $border-radius;
    padding: 20px;
    @include media-breakpoint-up(sm) {
      padding: 30px;
    }
    @include media-breakpoint-up(lg) {
      padding: 40px;
    }

    &.et-backdrop-visible {
      background-color: $colorBackdrop;
      color: color-yiq($colorBackdrop);
    }

    max-width: 100%;
    @include media-breakpoint-up(sm) {
      max-width: 75%;
    }
    @include media-breakpoint-up(md) {
      max-width: 50%;
    }
    @include media-breakpoint-up(lg) {
      max-width: 33%;
    }
    max-height: 100%;
    overflow-y: auto; // allow scroll bars to appear if very long text is entered.
  }

  .et-main-slider-size-fullsizeImage .et-main-slider-slide-backdrop.et-backdrop-transparent {
    padding: 20px $grid-gutter-width / 2;
    @include media-breakpoint-up(sm) {
      padding: 30px $grid-gutter-width / 2;
    }
    @include media-breakpoint-up(lg) {
      padding: 40px $grid-gutter-width / 2;
    }
  }

  .et-align-horizontal-left {
    .et-main-slider-slide-positioner {
      justify-content: flex-start;
    }

    .et-main-slider-slide-backdrop {
      text-align: left;
    }

    .et-main-slider-slide-cta {
      justify-content: center;
      align-items: flex-start;
      @include media-breakpoint-up(md) {
        align-items: center;
        justify-content: flex-start;
      }
    }
  }

  .et-align-horizontal-center {
    .et-main-slider-slide-positioner {
      justify-content: center;
    }

    .et-main-slider-slide-backdrop {
      text-align: center;
    }

    .et-main-slider-slide-cta {
      align-items: center;
      justify-content: center;
    }
  }

  .et-align-horizontal-right {
    .et-main-slider-slide-positioner {
      justify-content: flex-end;
    }

    .et-main-slider-slide-backdrop {
      text-align: right;
    }

    .et-main-slider-slide-cta {
      justify-content: center;
      align-items: flex-end;
      @include media-breakpoint-up(md) {
        align-items: center;
        justify-content: flex-end;
      }
    }
  }

  .et-align-horizontal-fullWidth {
    .et-main-slider-slide-positioner {
      justify-content: center;
    }

    .et-main-slider-slide-backdrop {
      width: 100%;
      max-width: 100%;
      text-align: center;
    }
  }

  .et-align-vertical-top {
    .et-main-slider-slide-positioner {
      align-items: flex-start;
    }
  }

  .et-align-vertical-center {
    .et-main-slider-slide-positioner {
      align-items: center;
    }
  }

  .et-align-vertical-bottom {
    .et-main-slider-slide-positioner {
      align-items: flex-end;
    }
  }

  .et-align-vertical-fullHeight {
    .et-main-slider-slide-positioner {
      align-items: center;
    }

    .et-main-slider-slide-backdrop {
      height: 100%;
    }
  }

  .et-main-slider-slide-cta {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    .btn:not(:first-child) {
      margin-top: $grid-gutter-width / 2;
      margin-left: 0;
    }
    @include media-breakpoint-up(md) {
      flex-direction: row;
      .btn:not(:first-child) {
        margin-top: 0;
        margin-left: $grid-gutter-width / 2;
      }
    }
  }

  .slick-slider {
    line-height: 0; // removes tiny space below slider due to its setting the slides to inline-block
    .et-main-slider-slide {
      line-height: normal; // reset line-height or linebreaks will not work
    }
  }

  .slick-slide {
    padding: 0;
  }

  // Position bubbles
  .et-slider-bottom-nav {
    position: absolute;
    bottom: 10px;
    left: 0;
    right: 0;

    .slick-dots {
      margin: 0;

      li button {
        border: 1px solid $colorFontLight;
      }

      li.slick-active button {
        background-color: $colorFontLight;
      }
    }
  }

  --et-main-slider-animation-delay: 500ms;
  --et-main-slider-animation-duration: 5s;
  --et-main-slider-animation-function: ease-in-out;

  @keyframes et-main-slider-animation-zoom-in {
    from {
      transform: scale(1);
    }
    to {
      transform: scale(1.2);
    }
  }

  @keyframes et-main-slider-animation-zoom-out {
    from {
      transform: scale(1.2);
    }
    to {
      transform: scale(1);
    }
  }

  @keyframes et-main-slider-animation-color-in {
    from {
      filter: grayscale(1);
    }
    to {
      filter: grayscale(0);
    }
  }

  .et-slider-animation-zoomIn,
  .et-slider-animation-zoomOut,
  .et-slider-animation-colorIn {
    .slick-current img.et-main-slider-slide-image {
      animation-duration: var(--et-main-slider-animation-duration);
      animation-delay: var(--et-main-slider-animation-delay);
      animation-timing-function: var(--et-main-slider-animation-function);
      animation-iteration-count: 1;
      animation-fill-mode: forwards;
    }
  }

  .et-slider-animation-zoomIn {
    .slick-current img.et-main-slider-slide-image {
      animation-name: et-main-slider-animation-zoom-in;
    }
  }

  .et-slider-animation-zoomOut {
    img.et-main-slider-slide-image {
      transform: scale(1.2);
    }
    .slick-current img.et-main-slider-slide-image {
      animation-name: et-main-slider-animation-zoom-out;
    }
  }

  .et-slider-animation-colorIn {
    img.et-main-slider-slide-image {
      filter: grayscale(1);
    }
    .slick-current img.et-main-slider-slide-image {
      animation-name: et-main-slider-animation-color-in;
    }
  }
}