/*------------------------------------
  Slide Effect v2
------------------------------------*/
.u-icon__elem-regular,
.u-icon__elem-hover {
  position: relative;
  top: 0;
  left: 0;
  display: block;
  transition: all .3s ease-in-out;
}

.u-icon__elem-hover {
  position: absolute !important;
}

.u-icon-slide-up--hover,
.u-icon-slide-down--hover,
.u-icon-slide-left--hover,
.u-icon-slide-right--hover {
  overflow: hidden;
}

// Hover slide-v2--up
.u-icon-slide-up--hover .u-icon__elem-regular {
  transform: translateY(-20%);

  &.u-line-icon-pro {
    transform: translateY(-30%);
  }
}

.u-icon-slide-up--hover .u-icon__elem-hover {
  transform: translateY(110%);

  &.u-line-icon-pro {
    transform: translateY(120%);
  }
}

.u-icon-slide-up--hover:hover .u-icon__elem-regular,
.u-icon-block--hover:hover .u-icon-slide-up--hover .u-icon__elem-regular {
  transform: translateY(-110%);

  &.u-line-icon-pro {
    transform: translateY(-120%);
  }
}

.u-icon-slide-up--hover:hover .u-icon__elem-hover,
.u-icon-block--hover:hover .u-icon-slide-up--hover .u-icon__elem-hover {
  transform: translateY(-20%);

  &.u-line-icon-pro {
    transform: translateY(-30%);
  }
}

// Hover slide-v2--down
.u-icon-slide-down--hover .u-icon__elem-regular {
  transform: translateY(-110%);

  &.u-line-icon-pro {
    transform: translateY(-120%);
  }
}

.u-icon-slide-down--hover .u-icon__elem-hover {
  transform: translateY(-20%);

  &.u-line-icon-pro {
    transform: translateY(-30%);
  }
}

.u-icon-slide-down--hover:hover .u-icon__elem-regular,
.u-icon-block--hover:hover .u-icon-slide-down--hover .u-icon__elem-regular {
  transform: translateY(-20%);

  &.u-line-icon-pro {
    transform: translateY(-30%);
  }
}

.u-icon-slide-down--hover:hover .u-icon__elem-hover,
.u-icon-block--hover:hover .u-icon-slide-down--hover .u-icon__elem-hover {
  transform: translateY(80%);

  &.u-line-icon-pro {
    transform: translateY(90%);
  }
}

// Hover slide-v2--left
.u-icon-slide-left--hover .u-icon__elem-regular {
  transform: translate(0, -20%);

  &.u-line-icon-pro {
    transform: translate(0, -30%);
  }
}

.u-icon-slide-left--hover .u-icon__elem-hover {
  transform: translate(110%, -20%);

  &.u-line-icon-pro {
    transform: translate(110%, -30%);
  }
}

.u-icon-slide-left--hover:hover .u-icon__elem-regular,
.u-icon-block--hover:hover .u-icon-slide-left--hover .u-icon__elem-regular {
  transform: translate(-110%, -20%);

  &.u-line-icon-pro {
    transform: translate(-110%, -30%);
  }
}

.u-icon-slide-left--hover:hover .u-icon__elem-hover,
.u-icon-block--hover:hover .u-icon-slide-left--hover .u-icon__elem-hover {
  transform: translate(0, -20%);

  &.u-line-icon-pro {
    transform: translate(0, -30%);
  }
}

// Hover slide-v2--right
.u-icon-slide-right--hover .u-icon__elem-regular {
  transform: translate(-110%, -20%);

  &.u-line-icon-pro {
    transform: translate(-110%, -30%);
  }
}

.u-icon-slide-right--hover .u-icon__elem-hover {
  transform: translate(0, -20%);

  &.u-line-icon-pro {
    transform: translate(0, -30%);
  }
}

.u-icon-slide-right--hover:hover .u-icon__elem-regular,
.u-icon-block--hover:hover .u-icon-slide-right--hover .u-icon__elem-regular {
  transform: translate(0, -20%);

  &.u-line-icon-pro {
    transform: translate(0, -30%);
  }
}

.u-icon-slide-right--hover:hover .u-icon__elem-hover,
.u-icon-block--hover:hover .u-icon-slide-right--hover .u-icon__elem-hover {
  transform: translate(110%, -20%);

  &.u-line-icon-pro {
    transform: translate(110%, -30%);
  }
}