@include export-module('carousel-theme') {

  /*! carousel component theme */
  .e-carousel {
    .e-carousel-navigators {

      .e-previous .e-btn:not(:disabled),
      .e-next .e-btn:not(:disabled),
      .e-play-pause .e-btn:not(:disabled) {
        background-color: $carousel-navigator-btn-bg;

        .e-btn-icon {
          color: $carousel-navigator-icon-color;
        }

        &:active,
        &:focus,
        &:hover {
          background-color: $carousel-navigator-btn-bg-hover;
          outline: none;
        }
      }
    }

    .e-carousel-indicators .e-indicator-bar {
      .e-indicator {
        background-color: transparent;
        border-color: transparent;
        box-shadow: none;

        div {
          background-color: $carousel-indicator-bar-bg;
          border-color: $carousel-indicator-bar-bg;
        }

        &:active,
        &:focus,
        &:hover {
          background-color: transparent;
          border-color: transparent;
          box-shadow: none;
          outline: none;
        }

        &:focus-visible {
          border-color: $carousel-indicator-border-color-focus;
        }
      }

      &.e-active .e-indicator div {
        background-color: $carousel-indicator-bar-bg-active;
        border-color: $carousel-indicator-bar-bg-active;
      }
    }
  }
}