$carousel-nav-background: rgba($white, 0.7) !default
$carousel-nav-color: $text !default
$carousel-title-background: rgba($white, 0.6) !default
$carousel-title-size: $size-7 !default
$carousel-border: none
$carousel-animation-speed: .5s
$carousel-animation-method: ease-in-out

=carousel-item
  display: block
  position: relative
  flex: 1 0 100%
  &.has-background
    .is-background
      object-fit: cover
      object-position: center center
      height: 100%
      width: 100%
  .title
    position: absolute
    left: 0
    right: 0
    bottom: 0
    padding: 1.5em
    margin: 0
    text-align: center
    background: $carousel-title-background
    font-size: $carousel-title-size

=carousel-container
  width: 100%
  position: relative
  border: $carousel-border
  display: flex
  margin: 0
  padding: 0
  left: -100%
  transform: translateX(100%)
  @content

=carousel
  position: relative
  overflow: hidden
  .carousel-container
    +carousel-container
      .carousel-item
        +carousel-item
  .carousel-navigation
    +carousel-navigation
  &.is-reversing
    .carousel-container
      transform: translateX(-100%)

// Carousel Navigation (includes previous - next actions elements)
=carousel-navigation
  display: flex
  justify-content: space-around
  width: 100%
  pointer-events: none
  .carousel-nav-left,
  .carousel-nav-right
    padding: 1em
    pointer-events: auto
  &.is-centered
    justify-content: center
  &.is-overlay
    top: 50%
    transform: perspective(1px) translateY(-50%)
    bottom: auto
    left: auto
    right: auto
    align-items: center
    justify-content: space-between
    z-index: 99
    .carousel-nav-left,
    .carousel-nav-right
      height: 2.2em
      width: 2em
      background: $carousel-nav-background
      display: flex
      justify-content: center
      align-items: center
      color: $carousel-nav-color
      position: absolute
      left: 0
      &:hover
        cursor: pointer
    .carousel-nav-right
      left: auto
      right: 0

// Sizes
.carousel
  +carousel
  &[data-size]
    &:not(.carousel-animate-fade)
      .carousel-container
        .carousel-item
          padding: 1em

// Hero Carousel
=hero-carousel
  display: flex
  position: absolute
  top: 0
  left: 0
  bottom: 0
  right: 0
  height: auto
  border: none
  margin: auto
  padding: 0
  z-index: 0

.hero
  &.has-carousel
    position: relative
    + .hero-body,
    + .hero-head,
    + .hero-footer
      z-index: 1
    .hero-carousel
      +hero-carousel
      .carousel-container
        height: auto !important

.hero-carousel
  +carousel

// Animation
.carousel,
.hero-carousel
  &.carousel-animate-slide
    &.carousel-animated
      .carousel-container
        transform: none !important
        transition: transform $carousel-animation-speed $carousel-animation-method
  &.carousel-animate-fade
    .carousel-item
      position: absolute
      width: 100%
      height: 100%
      transition: opacity $carousel-animation-speed $carousel-animation-method
      &.is-active
        opacity: 1
      &:not(.is-active)
        opacity: 0