#image-slider
  width: 100%
  overflow: visible
  position: relative

  .placeholder
    position: relative
    width: 100%
    height: 0
    padding-bottom: 65%
    background-color: white

    +respond-to-width(950)
      padding-bottom: 50%

    figure
      position: absolute
      z-index: 5
      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: contain
        background-position: center
        background-repeat: no-repeat


        &.small
          display: none

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

          &.small
            display: block

      &.active
        opacity: 1

  .controllers
    position: relative
    height: 40px
    width: 100%
    overflow: hidden
    z-index: 999

    .dots
      height: 20px
      text-align: center
      .dot
        display: inline-block
        width: 9px
        height: 9px
        border-radius: 50%
        background-color: #A5AAAF
        cursor: pointer

        &.active
          background-color: $blue

    .thumb-holder
      white-space: nowrap
      width: 100%
      height: 75px
      overflow-x: scroll
      overflow-y: hidden
      +flex(space-between, center)

      @supports (display: grid)
        display: grid
        //grid-template-columns: 60px 60px 60px 60px 60px 60px
        grid-template-columns: repeat(auto-fill, minmax(60px, 1fr))
        grid-column-gap: 24px

      figure
        position: relative
        z-index: 1
        top: 0
        left: 0
        width: 60px
        height: 60px
        display: inline-block
        flex-shrink: 0
        background-color: white

        span
          position: absolute
          top: 0
          left: 0
          width: 100%
          height: 100%
          background-size: contain
          background-position: center
          background-repeat: no-repeat
          filter: grayscale(100%)

        &.active
          z-index: 2
          opacity: 1
          span
            filter: none

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

    .nav-item
      position: relative
      +flex(center, center)
      width: 20%
      height: 100%
      cursor: pointer
      transition: background 0.3s
      flex-shrink: 0

      span
        width: 8px
        transition: transform 0.3s

        .arrow-icon
          position: relative
          top: -1px
          left: 6px
          width: 100%
          transform-origin: center
          .st0
            fill: white

      &:after
        content: ''
        //+arrowWhite


  .nav-item
    &.previous, &.next
      +flex(center, center)
      position: absolute
      z-index: 10
      left: -15px
      top: 50%
      border-radius: 5px
      cursor: pointer
      transition: background 0.3s
      width: 30px
      height: 30px
      background: $euroYellow url(/img/svg/arrow/arrow_dark.svg) no-repeat 50% 50%
      background-size: 16.6667%
      transform: rotate(180deg)

      +respond-to-width(1150)
        left: 15px

      &:hover
        background-color: lighten($euroYellow, 10%)

    &.next
      left: auto
      right: -15px
      background: $euroYellow url(/img/svg/arrow/arrow_dark.svg) no-repeat 50% 50%
      background-size: 16.6667%
      transform: rotate(0deg)

      +respond-to-width(1150)
        right: 15px

      &:hover
        background-color: lighten($euroYellow, 10%)