
// @require core/widget/widget.scss

//FIXME: Improve support for layout, image and figure items

/* CAROUSEL */

.carousel {

  @extend %widget;
  display: flex;
  align-items: stretch;
  height: $carousel-height;

  /* INDICATORS */

  &-indicators {
    z-index: $carousel-indicators-z-index !important;
    display: flex;
    position: absolute;
    bottom: $gutter;
    left: 50%;
    transform: translateX(-50%);
  }

  /* INDICATOR */

  &-indicator {

    width: $carousel-indicator-width;
    height: $carousel-indicator-height;
    border-width: $carousel-indicator-border-width;
    border-style: $carousel-indicator-border-style;
    border-color: $carousel-indicator-border-color;
    border-radius: $carousel-indicator-border-radius;
    background-color: $carousel-indicator-bg-color;
    cursor: pointer;
    opacity: $carousel-indicator-opacity;
    transition: none; // Safari fix
    transition-property: background-color, opacity;
    transition-duration: $carousel-indicator-animation-duration;

    /* NOT FIRST */

    &:not(:first-child) {
      margin-left: $gutter-half / 2;
    }

    /* NOT LAST */

    &:not(:last-child) {
      margin-right: $gutter-half / 2;
    }

    /* CURRENT */

    &.current {
      background-color: $carousel-indicator-current-bg-color;
    }

  }

  /* ITEMS */

  &-items {

    position: relative;
    overflow: hidden;
    flex: 1 1 auto; // IE-10/11 sets flex-shrink to 0
    background-color: $carousel-items-bg-color;

    /* ITEM */

    > * {
      @include fill-absolute ();
      border-radius: inherit !important;
      margin: 0 !important;
    }

    /* SCROLLABLE ITEM */

    > :not(.card):not(.layout) {
      overflow: auto;
    }

  }

  /* HOVER */

  &:hover {

    /* INDICATOR */

    .carousel-indicator {

      opacity: $carousel-hover-indicator-opacity;

      &:hover {
        opacity: $carousel-indicator-hover-opacity;
      }

    }

  }

}
