[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%;
      }
    }
  }
}