// Name:            Slider
// Description:     The slider is a responsive display of elements that can be scrolled through using the mouse or touch gestures.
//
// Component:       `c-slider`
//
//
// Variants:        `.c-slider--scroll`
@use '../../../assets/sass/settings/v7/colors.tokens' as *;
@use '../../../assets/sass/settings/v7/layout-standard' as *;
@use '../../../assets/sass/settings/v7/global' as *;
@use '../../../assets/sass/settings/v7/spacing.tokens' as *;
@use '../../../assets/sass/settings/v7/scrollbar' as *;
@use '../../../assets/sass/tools/v7/mq' as *;
@use '../../../assets/sass/tools/v7/zindex' as *;
@use '../../../assets/sass/tools/v7/typography' as *;

.c-slider {
  padding-bottom: $padding-xxxlarge;
  @include bp(lg){
    padding-bottom: 0;
  }
  
  @for $i from 0 through 7 {
    
    input:nth-of-type(#{$i + 1}):checked {
      
      ~ ul li:first-of-type {
        margin-left: #{$i * -101%};
        @include bp(sm){
          margin-left: #{$i * -100%};
        }
      }
  
      ~ .c-slider__navigation label:nth-of-type(#{$i + 1}):after {
        opacity: 1;
      }
  
      ~ .c-slider__arrows > label:nth-of-type(#{$i}) {
        right: auto;
        left: 0%;
        display: block;
        transform: rotate(45deg);
      }
  
      ~ .c-slider__arrows > label:nth-of-type(#{$i + 2}) {
        right: 0;
        left: auto;
        display: block;
        transform: rotate(225deg);
      }
  
    }
  }
  
  ul {
    box-sizing: border-box;
    margin: 0 auto;
    
    > li {
      white-space: normal;
      transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1);
    }
  }
  
  .c-slider__navigation {
    bottom: 2rem;
    left: 50%;
    user-select: none;
    -webkit-touch-callout: none;

    @include bp(md){
      left: 13%;
    }
    
    div {
      margin-left: -100%;
    }
    
    label {
      display: inline-block;
      margin: 0 4px;
      padding: 4px;
      background: $ui-04;
      user-select: none;
      -webkit-touch-callout: none;
      
      &::after {
        position: absolute;
        top: 50%;
        left: 50%;
        content: '';
        margin-top: -6px;
        margin-left: -6px;
        padding: 6px;
        border-radius: 50%;
        opacity: 0;
        background: $ui-06;
      }
      
      &:hover:after {
        opacity: 1;
      }
    }
  }
  
  &.inside .c-slider__navigation {
    bottom: 10px;
    margin-bottom: 10px;
    
    label {
      border: 1px solid #7e7e7e;
    }
  }

  input {

    &:first-of-type:checked ~ .c-slider__arrows label.goto-last {
      right: auto;
      left: 0;
      display: block;
      transform: rotate(45deg);
    }
    
    &:last-of-type:checked ~ .c-slider__arrows label.goto-first {
      right: 0;
      left: auto;
      display: block;
      transform: rotate(225deg);
    }
  }
  
  .c-slider__arrows {
    bottom: .9rem;
    left: 5%;
    z-index: 9;
    box-sizing: content-box;
    width: 90%;
    height: 21px;
    user-select: none;
    -webkit-touch-callout: none;
    @include bp(md){
      left: 3%;
      width: 20%;
    }
    
    label {
      
      top: -50%;
      padding: 4px;
      box-shadow: inset 2px -2px 0 0px $ui-01;
      transition: box-shadow 0.15s, margin 0.15s;
      user-select: none;
      -webkit-touch-callout: none;
      
      &:hover {
        margin: 0 0px;
        &::before {
          background-color: var(--background-color-muted-alpha);
        }
      }
      
      &::before {
        position: absolute;
        top: -75%;
        left: -75%;
        content: '';
        width: 250%;
        height: 250%;
        border-radius: 50%;
        
      }
    }
  }


  // Scroll snap version

  &--scroll {

    // &::after,
    // &::before {
    //   position: absolute;
    //   bottom: 50%;
    //   content: '\00a0';
    //   display:inline-block;
    //   width: 1rem;
    //   height: 1rem;
    //   padding: 1rem;
    //   border-radius: 50%;
    //   background-repeat: no-repeat;
    //   background-size: contain;
    //   color: $color-white;
    //   font-size: 1.5rem;
    //   @include z(base);
    //   background-color: var(--background-color-dark);
    // }

    // &::after {
    //   left: $margin-base;
    //   background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0iZmVhdGhlciBmZWF0aGVyLWFycm93LWxlZnQtY2lyY2xlIj48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSIxMCIvPjxwb2x5bGluZSBwb2ludHM9IjEyIDggOCAxMiAxMiAxNiIvPjxsaW5lIHgxPSIxNiIgeTE9IjEyIiB4Mj0iOCIgeTI9IjEyIi8+PC9zdmc+');
    // }
    // &::before {
    //   left: calc(100% - 3rem);
    //   background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0iZmVhdGhlciBmZWF0aGVyLWFycm93LXJpZ2h0LWNpcmNsZSI+PGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iMTAiLz48cG9seWxpbmUgcG9pbnRzPSIxMiAxNiAxNiAxMiAxMiA4Ii8+PGxpbmUgeDE9IjgiIHkxPSIxMiIgeDI9IjE2IiB5Mj0iMTIiLz48L3N2Zz4=');
    // }

    .c-slider__arrows {

      &-prev {
        left: $margin-base;
      }

      &-next {
        left: calc(100% - 3rem);
      }

      &-prev,
      &-next {
        bottom: 50%;
        padding: $padding-base;
        @include z(cover);
      }
      
    }
    
    .c-slider__container {
      scroll-behavior: smooth;
      scroll-snap-type: x mandatory;
      @include scrollbar;
    }
    
    .c-slider__item {
      justify-content: center;
      min-width: 100%;
      scroll-snap-align: center;
      scroll-snap-stop: always;
    }

  }

}