data-lazy

{

opacity: 0;
transition: {
  property: opacity;
  duration: .4s;
  timing-function: ease-in;
}

}

.js {

&-carousel {
  .js-next,
  .js-prev {
    opacity: 0;
  }

  &.slick-initialized {
    .js-next,
    .js-prev {
      opacity: 1;
    }
  }
}

&-slide {
  &:first-child {
    height: auto;
  }
}

}

.slick {

&-vertical {
  .slick-slide {
    border: none;
  }
}

}

/*————————————

Border Colors

————————————*/

/* Primary Colors */ .g-brd-primary {

&--before {
  &--active {
    &::before {
      .slick-active & {
        border-color: $g-color-primary !important;
      }
    }
  }
}

&--active {
  .slick-active & {
    border-color: $g-color-primary !important;
  }
}

}

.js-pagination .g-brd-primary–before–hover:hover::before {

border-color: $g-color-primary !important;

}

/*————————————

Border Width

————————————*/

.g-brd-3 {

&--before {
  &--active {
    &::before {
      .slick-active & {
        border-width: 3px !important;
      }
    }
  }
}

}

/*————————————

Box shadows

————————————*/

.g-parent.slick-current {

.u-shadow-v24--active {
  box-shadow: 0 15px 20px 0 rgba($g-color-black, .06);
}

}

/*————————————

Dot line v1

————————————*/

.u-dot-line-v1, .u-dot-line-v1-2 {

&__inner {
  &::before {
    .slick-active & {
      width: 100%;
      height: 100%;
    }
  }
}

}

/*————————————

Dot line v2

————————————*/

.u-dot-line-v2, .u-dot-line-v2-2 {

&__inner {
  &::before {
    .slick-active & {
      width: 100%;
      height: 100%;
    }
  }
}

}