@import '_functions';

/* smart-carousel */
smart-carousel {
  width: var(--smart-carousel-default-width);
  height: var(--smart-carousel-default-height);

  >.smart-container,
  &.smart-container {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
  }

  .smart-items-container {
    position: relative;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    overflow: hidden;
  }

  &[disabled] {
    opacity: 0.55;
    cursor: default;
    pointer-events: none;
  }

  &[swipe] {
    user-select: none;
  }

  .smart-carousel-item {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
    opacity: 0;
    z-index: 0;
    box-sizing: border-box;
    pointer-events: none;
    user-select: none;
    background-position: center;
    background-repeat: no-repeat;

    .smart-carousel-item-container {
      pointer-events: none;
      user-select: text;
      position: relative;
      width: 100%;
      height: 100%;
      background-repeat: no-repeat;
      padding-top: 50px;
      z-index: 1;
      box-sizing: border-box;
      background-position: center;
      background-size: cover;
    }

    .smart-carousel-item-label,
    .smart-carousel-item-content {
      text-align: center;
      box-sizing: border-box;
      position: absolute;
      top: 30%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .smart-carousel-item-content {
      top: 40%;
      transform: translate(-50%, 0%);
    }

    .smart-carousel-html-content {
      position: absolute;
      left: 0px;
      top: 0px;
      width: 100%;
      height: 100%;
      z-index: 0;
      box-sizing: border-box;
    }

    &.smart-active {
      opacity: 1;
      pointer-events: all;
      user-select: text;
    }
  }

  .smart-arrow {
    position: absolute;
    top: 0px;
    width: 30px;
    height: 100%;
    cursor: pointer;
    opacity: 0.6;
    display: block;

    &:after {
      font-size: 20px;
      position: absolute;
      left: 0px;
      top: 0px;
      pointer-events: none;
      user-select: none;
    }

    &:focus,
    &:hover {
      opacity: 0.8;
    }

    &:active {
      opacity: 1;
    }

    >.smart-button {
      border-width: 0px;

      &:active {
        background-color: transparent;
      }
    }

    &[disabled] {
      opacity: 0.4;
      pointer-events: none;
    }

    &.smart-arrow-left {
      left: 0px;
    }

    &.smart-arrow-right {
      right: 0px;
    }
  }

  &[hide-arrows] {
    .smart-arrow {
      display: none;
    }
  }

  .smart-indicators-container {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translate(-50%);
    display: flex;
    flex-direction: row;
    align-items: center;

    .smart-indicator {
      width: 10px;
      height: 10px;
      border: 1px solid gray;
      background-color: white;
      margin: 2px;
      cursor: pointer;
      box-sizing: content-box;
      opacity: 0.5;

      &.smart-active {
        opacity: 0.9;
        border-width: 3px;
      }

      &:hover {
        opacity: 0.7;
      }
    }
  }

  &[hide-indicators] {
    .smart-indicators-container {
      display: none;
    }
  }

  //Animations
  &:not([animation='none']) {
    .smart-carousel-item {
      animation-duration: 1s;
    }

    /* displayMode:"default" animations */
    /* fade */
    .smart-carousel-item,
    &.fade .smart-carousel-item {
      &.smart-active.smart-animate-trigger {
        animation-name: carousel-active-fade;
      }

      &.smart-out.smart-animate-trigger {
        animation-name: carousel-out-fade;
      }
    }

    /* slide right to left */
    &.slide,
    &.slide-left {
      .smart-carousel-item.smart-active.smart-animate-trigger {
        animation-name: carousel-active-slide;
      }

      .smart-carousel-item.smart-out.smart-animate-trigger {
        animation-name: carousel-out-slide;
      }
    }

    /* slide left to right */
    &.slide-right {
      .smart-carousel-item.smart-active.smart-animate-trigger {
        animation-name: carousel-active-slide-right;
      }

      .smart-carousel-item.smart-out.smart-animate-trigger {
        animation-name: carousel-out-slide-right;
      }
    }

    /* slide bottom to top */
    &.slide-top {
      .smart-carousel-item.smart-active.smart-animate-trigger {
        animation-name: carousel-active-slide-top;
      }

      .smart-carousel-item.smart-out.smart-animate-trigger {
        animation-name: carousel-out-slide-top;
      }
    }

    /* slide top to bottom */
    &.slide-bottom {
      .smart-carousel-item.smart-active.smart-animate-trigger {
        animation-name: carousel-active-slide-bottom;
      }

      .smart-carousel-item.smart-out.smart-animate-trigger {
        animation-name: carousel-out-slide-bottom;
      }
    }
  }

  //displayMode="3d"
  &[display-mode="3d"] {
    .smart-carousel-html-content {
      padding-left: 30px;
      padding-right: 20px;
    }

    .smart-carousel-item {
      width: var(--smart-carousel-3d-mode-slide-width);
      height: var(--smart-carousel-3d-mode-slide-height);
      border: white solid 20px;
      position: absolute;
      box-sizing: border-box;
      overflow: hidden;
      top: 50%;
      left: 50%;
      z-index: 10;
      transform: translateX(-50%) translateY(-50%) rotateX(1deg) scale(1);
      transition-duration: 0ms;

      &[position="-3"] {
        transform: perspective(800px) translateX(calc(-50% - 340px)) translateY(-50%) scale(0.4);
        opacity: .1;
        z-index: 1;
      }

      &[position="-2"] {
        transform: perspective(800px) translateX(calc(-50% - 300px)) translateY(-50%) scale(0.5);
        opacity: .2;
        z-index: 8;
      }

      &[position="-1"] {
        transform: perspective(800px) translateX(calc(-50% - 260px)) translateY(-50%) scale(0.6);
        opacity: .3;
        z-index: 9;
      }

      &[position="1"] {
        transform: perspective(800px) translateX(calc(-50% + 260px)) translateY(-50%) scale(0.6);
        opacity: .3;
        z-index: 9;
      }

      &[position="2"] {
        transform: perspective(800px) translateX(calc(-50% + 300px)) translateY(-50%) scale(0.5);
        opacity: .2;
        z-index: 8;
      }

      &[position="3"] {
        transform: perspective(800px) translateX(calc(-50% + 340px)) translateY(-50%) scale(0.4);
        opacity: .1;
        z-index: 1;
      }
    }

    &:not([animation='none']) {
      .smart-carousel-item {
        transition-duration: 700ms;
      }

      .smart-carousel-item,
      .smart-carousel-item.smart-active,
      .smart-carousel-item.smart-out {
        animation-name: unset;
      }
    }

    &.circle {
      .smart-carousel-item {
        border-radius: 50%;
      }
    }

    //Carousel 3D vertical
    &.vertical {
      .smart-carousel-item {
        &[position="-3"] {
          transform: perspective(800px) translateX(-50%) translateY(calc(-50% - 210px)) scale(0.4);
        }

        &[position="-2"] {
          transform: perspective(800px) translateX(-50%) translateY(calc(-50% - 180px)) scale(0.5);
        }

        &[position="-1"] {
          transform: perspective(800px) translateX(-50%) translateY(calc(-50% - 150px)) scale(0.6);
        }

        &[position="1"] {
          transform: perspective(800px) translateX(-50%) translateY(calc(-50% + 150px)) scale(0.6);
        }

        &[position="2"] {
          transform: perspective(800px) translateX(-50%) translateY(calc(-50% + 180px)) scale(0.5);
        }

        &[position="3"] {
          transform: perspective(800px) translateX(-50%) translateY(calc(-50% + 210px)) scale(0.4);
        }
      }
    }

    &:not([animation='none']) {

      //Carousel 3d horizontal stacked
      &.horizontal-stacked {
        .smart-carousel-item {
          &[position="-3"] {
            transform: perspective(800px) translateX(calc(-50% - 395px)) translateY(-50%) scale(0.4);
          }

          &[position="-2"] {
            transform: perspective(800px) translateX(calc(-50% - 355px)) translateY(-50%) scale(0.5);
          }

          &[position="-1"] {
            transform: perspective(800px) translateX(calc(-50% - 280px)) translateY(-50%) scale(0.6);
          }

          &[position="1"] {
            transform: perspective(800px) translateX(calc(-50% + 280px)) translateY(-50%) scale(0.6);
          }

          &[position="2"] {
            transform: perspective(800px) translateX(calc(-50% + 355px)) translateY(-50%) scale(0.5);
          }

          &[position="3"] {
            transform: perspective(800px) translateX(calc(-50% + 395px)) translateY(-50%) scale(0.4);
          }
        }
      }

      //Carousel 3d bottom-top
      &.bottom-top {
        .smart-carousel-item {
          &[position="-3"] {
            transform: perspective(800px) translateX(calc(-50% - 450px)) translateY(calc(-50% + 150px)) scale(0.2);
          }

          &[position="-2"] {
            transform: perspective(800px) translateX(calc(-50% - 380px)) translateY(calc(-50% + 100px)) scale(0.4);
          }

          &[position="-1"] {
            transform: perspective(800px) translateX(calc(-50% - 280px)) translateY(calc(-50% + 30px)) scale(0.6);
          }

          &[position="1"] {
            transform: perspective(800px) translateX(calc(-50% + 280px)) translateY(calc(-50% - 30px)) scale(0.6);
          }

          &[position="2"] {
            transform: perspective(800px) translateX(calc(-50% + 380px)) translateY(calc(-50% - 100px)) scale(0.4);
          }

          &[position="3"] {
            transform: perspective(800px) translateX(calc(-50% + 450px)) translateY(calc(-50% - 150px)) scale(0.2);
          }
        }
      }

      //Carousel 3d top-bottom
      &.top-bottom {
        .smart-carousel-item {
          &[position="-3"] {
            transform: perspective(800px) translateX(calc(-50% - 450px)) translateY(calc(-50% - 150px)) scale(0.2);
          }

          &[position="-2"] {
            transform: perspective(800px) translateX(calc(-50% - 380px)) translateY(calc(-50% - 100px)) scale(0.4);
          }

          &[position="-1"] {
            transform: perspective(800px) translateX(calc(-50% - 280px)) translateY(calc(-50% - 30px)) scale(0.6);
          }

          &[position="1"] {
            transform: perspective(800px) translateX(calc(-50% + 280px)) translateY(calc(-50% + 30px)) scale(0.6);
          }

          &[position="2"] {
            transform: perspective(800px) translateX(calc(-50% + 380px)) translateY(calc(-50% + 100px)) scale(0.4);
          }

          &[position="3"] {
            transform: perspective(800px) translateX(calc(-50% + 450px)) translateY(calc(-50% + 150px)) scale(0.2);
          }
        }
      }
    }
  }

  //displayMode="multiple"
  &[display-mode="multiple"] {
    &:not([animation='none']) {

      &.smart-carousel-item.smart-out,
      &.smart-carousel-item.smart-active,
      &.smart-carousel-item.smart-animate-trigger.smart-out,
      &.smart-carousel-item.smart-animate-trigger.smart-active {
        animation-name: none;
      }

      .smart-items-container {
        transition-duration: 1s;
      }
    }

    .smart-items-container {
      overflow: hidden;
      width: max-content;
      transition: margin-left ease-in-out;
    }

    .smart-carousel-item {
      opacity: 1;
      float: left;
      display: inline-block;
      position: relative;
      width: var(--smart-carousel-multiple-mode-slide-width);

      &.smart-active {
        background-color: lightgray;
        transition: background-color 1s ease-in-out;
      }

      &.smart-out {
        transition: background-color 1s ease-in-out;
      }
    }
  }

  smart-repeat-button {
    &[hover] {
      button {
        background-color: transparent;
      }
    }
  }

  //Adaptive Height
  &[adaptive-height],
  &[adaptive-auto-height] {
    height: 100%;
    overflow: visible;
    transition: height 0.6s ease-out;
    margin: 0 auto 70px auto;

    >.smart-container,
    &.smart-container {
      position: relative;
    }

    .smart-container {
      overflow: visible;
    }

    .smart-carousel-item {
      height: auto;
    }

    .smart-slide-wrapper {
      height: 100%;
      position: relative;
      display: flex;
      align-items: center;
      padding: 0 65px;
    }

    .smart-indicators-container {
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      bottom: 0;
      margin-top: 20px;
    }

    .smart-arrow {
      width: 50px;
      height: 50px;
      background: var(--smart-surface);
      display: flex;
      align-items: center;
      justify-content: center;
      border-color: var(--smart-border);
      top: 50%;
      transform: translateY(-50%);
    }

    &.smart-calculated-height {
      .smart-carousel-item {
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .smart-slide-wrapper {
        height: auto;
      }
    }
  }
}

[disabled] {
  .smart-carousel-item {
    &.smart-active {
      pointer-events: none;
    }
  }
}

//Animations
@keyframes carousel-active-fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes carousel-out-fade {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes carousel-active-slide {
  from {
    left: 100%;
    opacity: 1;
  }

  to {
    left: 0%;
    opacity: 1;
  }
}

@keyframes carousel-out-slide {
  from {
    left: 0%;
    opacity: 1;
  }

  to {
    left: -100%;
    opacity: 1;
  }
}

@keyframes carousel-active-slide-right {
  from {
    opacity: 1;
    left: -100%;
  }

  to {
    opacity: 1;
    left: 0%;
  }
}

@keyframes carousel-out-slide-right {
  from {
    left: 0%;
    opacity: 1;
  }

  to {
    left: 100%;
    opacity: 1;
  }
}

@keyframes carousel-active-slide-top {
  from {
    top: 100%;
    opacity: 1;
  }

  to {
    top: 0%;
    opacity: 1;
  }
}

@keyframes carousel-out-slide-top {
  from {
    top: 0%;
    opacity: 1;
  }

  to {
    top: -100%;
    opacity: 1;
  }
}

@keyframes carousel-active-slide-bottom {
  from {
    opacity: 1;
    top: -100%;
  }

  to {
    opacity: 1;
    top: 0px;
  }
}

@keyframes carousel-out-slide-bottom {
  from {
    opacity: 1;
    top: 0px;
  }

  to {
    opacity: 1;
    top: 100%;
  }
}
@import 'rtl/_carousel';