@use 'sass:color';

$carousel-navigator-btn-bg: transparent !default;
$carousel-navigator-btn-bg-hover: $content-bg-color-hover !default;
$carousel-navigator-btn-bg-active: $content-bg-color-pressed !default;
$carousel-navigator-btn-focus-box-shadow: $shadow-focus-ring2 !default;
$carousel-navigator-btn-active-color: $icon-color-pressed !default;
$carousel-navigator-btn-hover-color: $icon-color-hover !default;
$carousel-navigator-icon-color: $icon-color !default;
$carousel-indicator-bar-bg: $primary-text-color !default;
$carousel-indicator-bar-border: 1px solid rgba($white, .4) !default;
$carousel-indicator-bar-bg-active: $primary !default;
$carousel-indicator-border-color-focus: $black !default;
$carousel-indicator-progress-bg: rgba($carousel-indicator-bar-bg-active, .4) !default;
$carousel-animation-duration: .6s !default;
$carousel-animation-timing-function: ease-in-out !default;
$carousel-navigator-btn-border-radius-hover: $border-radius-50p !default;
$carousel-indicator-padding: 6px !default;
$carousel-indicator-height: 48px !default;
$carousel-indicator-bar-border-radius: $border-radius-50p !default;
$carousel-indicator-bar-height: 12px !default;
$carousel-indicator-bar-width: 12px !default;
$carousel-indicator-dynamic-minheight: 36px !default;
$carousel-indicator-fraction-minheight: 36px !default;
$carousel-indicator-progress-minheight: 4px !default;
$carousel-indicator-progress-height: 4px !default;
$carousel-items-height: 100% !default;
$carousel-border-none: 0 !default;
$carousel-play-icon-line-height: 1 !default;
$carousel-indicator-border-radius: $border-radius-50p !default;
$carousel-dynamic-indicator-bar-height: 8px !default;
$carousel-indicator-progressbar-height: 100% !default;
$carousel-padding-none: 0 !default;
$carousel-margin-none: 0 !default;
$carousel-partial-horizontal-padding: 0 100px !default;
$carousel-partial-horizontal-padding-small: 0 75px !default;
$carousel-partial-horizontal-padding-extra-small: 0 50px !default;
$carousel-navigator-play-icon-padding-left: 3px !default;
$carousel-dynamic-indicator-bar-margin: 0 4px !default;
$carousel-navigator-btn-padding: .5em !default;

@include export-module('carousel-layout') {
  .e-carousel {
    display: block;
    margin: $carousel-margin-none;
    padding: $carousel-padding-none;
    position: relative;

    .e-carousel-items,
    .e-carousel-slide-container {
      height: $carousel-items-height;
      margin: $carousel-margin-none;
      overflow: hidden;
      padding: $carousel-padding-none;
      position: relative;
      width: 100%;
    }

    .e-carousel-items.e-swipe-start {
      cursor: pointer;
    }

    &.e-partial {
      .e-carousel-slide-container {
        padding: $carousel-partial-horizontal-padding;

        @media screen and (max-width: 480px) {
          padding: $carousel-partial-horizontal-padding-small;
        }

        @media screen and (max-width: 320px) {
          padding: $carousel-partial-horizontal-padding-extra-small;
        }
      }
    }

    .e-carousel-items {
      width: calc(var(--carousel-items-count) * 100%);
      display: flex;
      flex-direction: row;
      transition-property: transform;
      transition-duration: $carousel-animation-duration;
      transition-timing-function: $carousel-animation-timing-function;

      .e-carousel-item {
        height: $carousel-items-height;
        overflow: hidden;
        padding: $carousel-padding-none;
        position: relative;
        width: calc(100% / var(--carousel-items-count));
      }
    }

    &.e-blazor-carousel {
      .e-carousel-items {
        transform: translateX(calc((-100%/var(--carousel-items-count)) * var(--carousel-items-current)));
        transition: transform;
      }
    }

    &.e-blazor-carousel.e-rtl {
      .e-carousel-items {
        transform: translateX(calc((100%/var(--carousel-items-count)) * var(--carousel-items-current)));
        transition: transform;
      }
    }

    &.e-carousel-fade-animation {
      .e-carousel-items {
        &.e-fade-in-out {
          transition-property: none;
          animation: fade-in-out $carousel-animation-duration $carousel-animation-timing-function;
        }

        @keyframes fade-in-out {
          0% {
            opacity: 0;
          }

          100% {
            opacity: 1;
          }
        }
      }
    }

    &.e-carousel-slide-animation {
      .e-carousel-items {
        &.e-slide {
          transition-duration: $carousel-animation-duration;
        }
      }
    }

    &.e-carousel-custom-animation:not(.e-partial) {
      .e-carousel-item {
        display: block;
        height: $carousel-items-height;
        left: 0;
        opacity: 0;
        pointer-events: none;
        top: 0;

        &.e-active {
          opacity: 1;
          pointer-events: visible;
        }
      }
    }

    .e-carousel-navigators {
      align-items: center;
      display: flex;
      height: $carousel-items-height;
      justify-content: space-between;
      pointer-events: none;
      position: absolute;
      top: 0;
      width: 100%;
      z-index: 1;

      .e-play-pause,
      .e-previous,
      .e-next {
        padding: $carousel-navigator-btn-padding;
        pointer-events: auto;

        .e-btn {
          border: $carousel-border-none;
          box-shadow: none;

          &:hover {
            border-radius: $carousel-navigator-btn-border-radius-hover;
          }

          &.e-rtl {
            transform: rotate(180deg);
          }

          .e-play-icon {
            line-height: $carousel-play-icon-line-height;
            padding-left: $carousel-navigator-play-icon-padding-left;
          }
        }

        &.e-hover-arrows {
          display: none;
        }
      }
    }

    .e-carousel-indicators {
      align-items: center;
      bottom: 0;
      display: flex;
      justify-content: center;
      min-height: $carousel-indicator-height;
      padding: $carousel-padding-none;
      pointer-events: none;
      position: absolute;
      width: 100%;
      z-index: 1;

      &.e-default .e-indicator-bars {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        pointer-events: auto;

        .e-indicator-bar {
          padding: $carousel-padding-none;

          .e-indicator {
            align-items: center;
            display: flex;
            justify-content: center;
            padding: $carousel-indicator-padding;
          }

          .e-indicator div {
            border: $carousel-indicator-bar-border;
            border-radius: $carousel-indicator-bar-border-radius;
            height: $carousel-indicator-bar-height;
            transition-duration: $carousel-animation-duration;
            transition-property: background-color, border-color;
            transition-timing-function: $carousel-animation-timing-function;
            width: $carousel-indicator-bar-width;
          }

          .e-indicator .e-ripple-element {
            display: none;
          }
        }
      }

      &.e-dynamic {
        min-height: $carousel-indicator-dynamic-minheight;

        .e-indicator-bars {
          display: block;
          overflow: hidden;
          transition: opacity $carousel-animation-duration $carousel-animation-timing-function;
          white-space: nowrap;
          width: 80px;

          .e-indicator-bar {
            border-radius: $carousel-indicator-border-radius;
            display: inline-block;
            height: $carousel-dynamic-indicator-bar-height;
            left: calc(32px - calc(16px * var(--carousel-items-current)));
            margin: $carousel-dynamic-indicator-bar-margin;
            opacity: 1;
            position: relative;
            transform: scale(.33);
            transition-duration: $carousel-animation-duration;
            transition-property: transform, left;
            transition-timing-function: $carousel-animation-timing-function;
            white-space: nowrap;
            width: 8px;

            &.e-active {
              transform: scale(1);
            }

            &.e-prev,
            &.e-next {
              transform: scale(.66);
            }
          }
        }
      }

      &.e-fraction {
        min-height: $carousel-indicator-fraction-minheight;
      }

      &.e-progress {
        min-height: $carousel-indicator-progress-minheight;

        .e-indicator-bars {
          height: $carousel-indicator-progress-height;
          width: 100%;

          .e-indicator-bar {
            height: $carousel-indicator-progressbar-height;
            left: 0;
            position: absolute;
            top: 0;
            transform: translate3d(0, 0, 0) scaleX(calc(var(--carousel-items-current) / var(--carousel-items-count))) scaleY(1);
            transition-duration: $carousel-animation-duration;
            transform-origin: left top;
            width: 100%;
          }
        }
      }
    }
  }
}

@mixin carousel-navigator-button-color($color) {
  .e-btn-icon {
    color: $color;
  }
}

@include export-module('carousel-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;
        @include carousel-navigator-button-color($carousel-navigator-icon-color);

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

        @if $skin-name == 'fluent2' or $skin-name == 'tailwind3' {
          &:focus-visible {
            background-color: $carousel-navigator-btn-bg;
            box-shadow: $carousel-navigator-btn-focus-box-shadow;
            @include carousel-navigator-button-color($carousel-navigator-icon-color);
            @if $skin-name !='tailwind3' {
              border-radius: $carousel-navigator-focus-visible-border-radius;
              @include carousel-navigator-button-color($carousel-navigator-btn-hover-color);
            }
          }
          &:active {
            @if $skin-name == 'tailwind3' {
              background-color: $carousel-navigator-btn-bg-active;
            }
            @include carousel-navigator-button-color($carousel-navigator-btn-active-color);
          }
          &:hover,
          &:focus {
            @include carousel-navigator-button-color($carousel-navigator-btn-hover-color);
          }
        }
      }
    }

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

          div {
            background: $carousel-indicator-bar-bg;
            @if ($skin-name == 'Material3') {
              border-image: $carousel-indicator-bar-border-bg;
            }
            @else {
              border-color: $carousel-indicator-bar-bg;
            }
          }

          &:active,
          &:focus,
          &:hover {
            background: 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;
        }
      }

      &.e-dynamic .e-indicator-bars {
        .e-indicator-bar {
          background-color: $carousel-navigator-icon-color;

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

      &.e-fraction .e-indicator-bars {
        color: $carousel-navigator-icon-color;
      }

      &.e-progress .e-indicator-bars {
        background-color: $carousel-indicator-progress-bg;

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

@include export-module('carousel-tailwind3-icons') {
  .e-carousel {

    .e-previous-icon::before {
      content: '\e765';
    }

    .e-next-icon::before {
      content: '\e748';
    }

    .e-play-icon::before {
      content: '\e70c';
    }

    .e-pause-icon::before {
      content: '\e77b';
    }

    &.e-rtl {
      .e-previous-icon::before {
        content: '\e748';
      }

      .e-next-icon::before {
        content: '\e765';
      }
    }
  }
}