//*mixins*//
@import "./mixin.scss";

.slick-slider {
   position: relative;
   box-sizing: border-box;
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -khtml-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
   -ms-touch-action: pan-y;
   touch-action: pan-y;
   -webkit-tap-highlight-color: transparent;
}
.slick-list {
   width: 100%;
   height: 90%;
   overflow: hidden;
}
.slick-track {
   margin-left: 1rem;
}
.slick-slide {
   margin-right: 2rem;
   float: left;
   height: auto;
   min-height: 1px;
   [dir="rtl"] & {
      float: right;
   }

   &.slick-loading img {
      display: none;
   }
   display: none;
   &.dragging img {
      pointer-events: none;
   }
   .slick-initialized & {
      display: block;
   }
   .slick-loading & {
      visibility: hidden;
   }
   &:focus {
      outline: none;
   }
}
.slick-arrow {
   position: absolute;
   z-index: 15;
   font-size: 0;
   color: transparent;
   border: none;
   background-color: transparent;
   &:focus {
      outline: none;
   }
}
.slick-prev {
   top: calc(50% - 1.5rem);
   left: -2.5rem;
   width: 3rem;
   height: 3rem;
   border-top: 2px solid;
   border-left: 2px solid;
   border-color: rgba($secondary-color-two, 0.6);
   transform: rotate(-45deg);
   transition: border-color 0.2s linear;
   &:hover {
      cursor: pointer;
      border-color: rgba($secondary-color-two, 1);
   }
}
.slick-next {
   top: calc(50% - 1.5rem);
   right: -2.5rem;
   width: 3rem;
   height: 3rem;
   border-top: 2px solid;
   border-right: 2px solid;
   border-color: rgba($secondary-color-two, 0.6);
   transform: rotate(45deg);
   transition: border-color 0.2s linear;
   &:hover {
      cursor: pointer;
      border-color: rgba($secondary-color-two, 1);
   }
}
.slick-dots {
   margin: 0;
   margin-top: 1rem;
   padding: 0;
   list-style-type: none;
   display: flex;
   align-items: center;
   justify-content: center;
   li {
      margin-right: 0.8rem;
      &:last-child {
         margin-right: 0;
      }
      button {
         font-size: 0;
         color: transparent;
         border: none;
         background-color: transparent;
         line-height: 0;
         &:focus {
            outline: none;
         }
         width: 1.5rem;
         height: 1.5rem;
         border: 1px solid;
         border-color: rgba($secondary-color-two, 0.6);
         border-top-right-radius: 32%;
         border-bottom-left-radius: 32%;
         transition: border-color 0.2s linear, background-color 0.2s linear;
      }
      &:hover {
         cursor: pointer;
         button {
            cursor: pointer;
            border-color: rgba($secondary-color-two, 1);
            background-color: $secondary-color-two;
         }
      }
   }
}
.slick-dots {
   .slick-active {
      button {
         border-color: rgba($secondary-color-two, 1);
         background-color: $secondary-color-two;
      }
   }
}
.intro-dots{
   margin: 0;
   padding: 0;
   list-style-type: none;
   position: absolute;
   top: 0;
   left: 100%;
   z-index: 2;
   height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: space-around;
   align-items: center;
   li{
      display: table;
      width: 4rem;
      height: 2rem;
      text-align: left;
      button{
         display: table-cell;
         vertical-align: middle;
         font-size: 0;
         color: transparent;
         border: none;
         background-color: transparent;
         padding: 0;
         width: 1rem;
         height: 1rem;
         border-radius: 50%;
         background-color: $secondary-color-two;
         transition: all 0.3s linear;
         &:focus{
            outline: none;
         }
      }
      &:hover{
         cursor: pointer;
         button{
            cursor: pointer;
            width: 2.5rem;
            height: 0.4rem;
            border-radius: 0;
            position: relative;
            &::before{
               content: "";
               position: absolute;
               left: -0.3rem;
               top: -0.4rem;
               height: 0.4rem;
               width: 1.5rem;
               background-color: $secondary-color-two;
               transform: rotate(-45deg);
            }
            &::after{
               content: "";
               position: absolute;
               left: -0.3rem;
               bottom: -0.4rem;
               height: 0.4rem;
               width: 1.5rem;
               background-color: $secondary-color-two;
               transform: rotate(45deg); 
            }
         }
      }
   }
   @include notebook{
      top: 102%;
      flex-direction: row;
      height: 0;
      left: calc(50% - 80px);
   }
   @include mobile-height{
      display: none!important;
   }
}
.intro-dots{
   .slick-active{
      button{
         width: 2.5rem;
         height: 0.4rem;
         border-radius: 0;
         position: relative;
         &::before{
            content: "";
            position: absolute;
            left: -0.3rem;
            top: -0.4rem;
            height: 0.4rem;
            width: 1.5rem;
            background-color: $secondary-color-two;
            transform: rotate(-45deg);
         }
         &::after{
            content: "";
            position: absolute;
            left: -0.3rem;
            bottom: -0.4rem;
            height: 0.4rem;
            width: 1.5rem;
            background-color: $secondary-color-two;
            transform: rotate(45deg); 
         }
      }
   }
}