@import "../../Mixins";

.carousel-wrapper {
  .carousel-nav {
    @include nav-button;
  }
}

@media screen {

  .carousel-wrapper {
    position: relative;
    text-align: center;
    padding: 0 $nav-button-padding;

    .carousel {
      position: relative;
      display: block;
      max-height: 100%;
      max-width: 100%;
      margin: auto;
    }

    .carousel-frame {
      position: relative;
      overflow: hidden;
      height: 100%;
      width: 100%;

      .carousel-slider {
        white-space: nowrap;
        position: absolute;
        transition: all .3s ease;
      }
    }

    &.vertical {
      text-align: left;
      padding: $nav-button-padding 0;

      .carousel {
        display: block;
      }

      .carousel-frame {
        .carousel-slider {
          white-space: normal;
        }
      }

      .carousel-nav {
        transform: rotate(90deg) scale(1, 2);

        &.prev {
          left: $nav-button-left;
          top: -$nav-button-padding;
        }
        &.next {
          left: $nav-button-left;
          top: auto;
          right: auto;
          bottom: -$nav-button-padding;
        }
      }
    }
  }

}

@media print {

  .carousel-wrapper {
    .carousel {
      width: auto !important;
      height: auto !important;
    }
    .carousel-frame {
      .carousel-slider {
        > div {
          display: block !important;
        }
      }
    }
  }
}