.image-slider
  width: 100%
  overflow: visible
  box-shadow: 0px 0px 40px 0px rgba(0,0,0,0.2)

  .placeholder
    position: relative
    width: 100%
    cursor: move

  .controllers
    position: relative
    z-index: 3
    width: 100%
    height: 0
    padding-bottom: 49.65%

    +respond-to-width(1350)
      padding-bottom: 100%

    .nav-item
      position: absolute
      +flex(center, center)
      bottom: -50px
      width: 35px
      height: 35px
      cursor: pointer
      border-radius: 100%
      transition: background 0.3s

      span
        +flex(center, center)
        height: 16px
        width: 16px
        transform-origin: center
        transition: transform 0.3s

        .arrow-icon
          position: relative
          width: 10px
          height: 16px
          transform-origin: center
          .st0
            fill: white

      &.previous
        background-color: $brightBlue
        right: calc(50% + 3px)

        span
          .arrow-icon
            transform: rotate(90deg)

        &:hover
          background-color: lighten($brightBlue, 5%)

      &.next
        background-color: $orange
        left: calc(50% + 3px)


        span
          .arrow-icon
            transform: rotate(270deg)

        &:hover
          background-color: darken($orange, 5%)



  figure
    position: absolute
    z-index: 1
    top: 0
    left: 0
    width: 100%
    height: 100%
    opacity: 0
    transition: opacity 0.4s

    span
      position: absolute
      top: 0
      left: 0
      width: 100%
      height: 100%
      background-size: cover
      background-position: center

      &.small
        display: none

      +respond-to-width(480)
        &.medium
          display: none

        &.small
          display: block

    &.active
      z-index: 2
      opacity: 1