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

Arrows

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

.u-arrow {

&-v1 {
  &::before {
    display: inline-block;
    position: relative;
    top: 50%;
    left: 50%;
    vertical-align: top;
    transform: translateX(-50%) translateY(-50%);
  }

  &[class*="abs"] {
    &::before {
      position: absolute;
    }
  }
}

&-custom {
  &-v1 {
    .u-arrow-icon {
      display: block;
    }

    .u-arrow-text {
      position: absolute;
      top: 50%;
      transition: transform .3s;
    }

    &.js-prev {
      .u-arrow-text {
        transform: translateY(-50%) translateX(-100%);
      }
    }

    &.js-next {
      .u-arrow-text {
        transform: translateY(-50%) translateX(100%);
      }
    }

    &:hover {
      .u-arrow-text {
        transform: translateY(-50%) translateX(0);
      }
    }
  }

  &-v2 {
    overflow: hidden;
    transition: background-color 0.3s;

    .u-arrow-icon {
      transition: transform 0.3s;
    }

    .u-arrow-img {
      width: 100%;
      height: 100%;
      opacity: 0;
      transition: opacity 0.3s, transform 0.3s;
    }

    &.js-prev {
      .u-arrow-icon {
        transform: translateY(-50%) translateX(10px);
      }

      .u-arrow-img {
        transform: translateX(100%);
      }
    }

    &.js-next {
      .u-arrow-icon {
        transform: translateY(-50%) translateX(-10px);
      }

      .u-arrow-img {
        transform: translateX(-100%);
      }
    }

    &:hover {
      .u-arrow-icon {
        transform: translateY(-50%) translateX(0);
      }

      .u-arrow-img {
        opacity: .6;
        transform: translateX(0);
      }
    }
  }

  &-v3 {
    .u-arrow-helper {
      content: "";
      opacity: 0;
      transition: transform 0.3s, opacity 0.3s;
      transform: scale(0.9);
    }

    .u-arrow-icon {
      display: block;

      &-before,
      &-after {
        position: absolute;
        left: 25%;
        transition: transform 0.3s, background-color 0.3s;
        backface-visibility: hidden;
      }

      &-before {
        transform: translateX(-50%) rotate(30deg);
        transform-origin: 0 100%;
      }

      &-after {
        top: 50%;
        transform: translateX(-50%) rotate(-30deg);
        transform-origin: 0 0;
      }
    }

    &.js-next {
      .u-arrow-icon {
        transform: rotate(180deg);
      }
    }

    &:hover {
      .u-arrow-helper {
        background-color: $g-color-white;
        opacity: 1;
        transform: scale(1);
      }

      .u-arrow-icon {
        &-before,
        &-after {
          background-color: $g-color-primary;
        }

        &-before {
          transform: translateX(-50%) rotate(45deg);
        }

        &-after {
          transform: translateX(-50%) rotate(-45deg);
        }
      }
    }
  }

  &-v4 {
    width: 62px;
    height: 62px;
    transition: width 0.3s, background-color 0.3s;

    h4 {
      opacity: 0;
      transition: opacity 0.3s, transform 0.3s;
    }

    &.js-prev {
      h4 {
        transform: translateX(100%);
      }
    }

    &.js-next {
      h4 {
        transform: translateX(-100%);
      }
    }

    &:hover {
      width: 200px;

      .u-arrow-icon {
        color: $g-color-primary;
      }

      h4 {
        opacity: 1;
        transition-delay: 0.1s;
        transform: translateX(0);
      }
    }
  }

  &-v5 {
    .u-arrow-icon {
      &::before {
        transition: transform .3s .3s;
      }
    }

    .u-arrow-text {
      transition: transform .3s .3s;
      perspective: 1000px;
    }

    .u-arrow-title {
      position: absolute;
      top: 100%;
      width: 100%;
      height: 30%;
      transition: transform 0.3s;
      backface-visibility: hidden;
      transform-origin: 50% 0;
      transform: rotateX(-90deg);
      margin: 0;
    }

    .u-arrow-img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

    &.js-prev {
      .u-arrow-text {
        transform: translateX(-100%);
      }
    }

    &.js-next {
      .u-arrow-text {
        transform: translateX(100%);
      }
    }

    &:hover {
      .u-arrow-text {
        transform: translateX(0);
      }

      .u-arrow-title {
        transition-delay: .6s;
        transform: rotateX(0deg);
      }

      .u-arrow-icon {
        &::before {
          transition-delay: 0s;
        }
      }

      &.js-prev {
        .u-arrow-icon {
          &::before {
            transform: translateX(-100%);
          }
        }
      }

      &.js-next {
        .u-arrow-icon {
          &::before {
            transform: translateX(100%);
          }
        }
      }
    }
  }

  &-v6 {
    overflow: hidden;
    width: 40px;
    transition: width .4s, background-color .4s, z-index .4s;
    transition-timing-function: cubic-bezier(.7, 0, .3, 1);

    .u-arrow-text {
      width: 400px;
    }

    &:hover {
      width: 400px;
      z-index: 11;
    }
  }

  &-v7 {
    perspective: 1000px;

    .u-arrow-icon {
      &::before {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
      }
    }

    .u-arrow-img {
      backface-visibility: hidden;
      transition: transform 0.3s;
    }

    &.js-prev {
      perspective-origin: 100% 50%;

      .u-arrow-img {
        transform-origin: 0 50%;
        transform: rotateY(90deg);
      }
    }

    &.js-next {
      perspective-origin: 0 50%;

      .u-arrow-img {
        transform-origin: 100% 50%;
        transform: rotateY(-90deg);
      }
    }

    &:hover {
      .u-arrow-icon {
        color: $g-color-primary;
      }

      .u-arrow-img {
        transform: rotateY(0deg);
      }
    }
  }

  &-v8 {
    perspective: 1000px;

    .u-arrow-icon {
      &::before {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
      }
    }

    .u-arrow-title,
    .u-arrow-img {
      backface-visibility: hidden;
    }

    .u-arrow-title {
      transition: transform 0.3s;
    }

    .u-arrow-text {
      transition: transform 0.3s 0.3s;
      transform-style: preserve-3d;
    }

    &.js-prev {
      perspective-origin: 100% 50%;

      .u-arrow-text,
      .u-arrow-title {
        transform-origin: 0 50%;
        transform: rotateY(90deg);
      }
    }

    &.js-next {
      perspective-origin: 0 50%;

      .u-arrow-text,
      .u-arrow-title {
        transform-origin: 100% 50%;
        transform: rotateY(-90deg);
      }
    }

    &:hover {
      .u-arrow-icon {
        color: $g-color-primary;
        transition-delay: 0s;

        &::before {
          transition-delay: 0s;
        }
      }

      .u-arrow-text,
      .u-arrow-title {
        transform: rotateY(0deg);
      }

      .u-arrow-text {
        transition-delay: 0s;
      }

      .u-arrow-title {
        transition-delay: .3s;
      }
    }
  }

  &-v9 {
    width: 60px;

    .u-arrow-icon {
      &::after {
        content: "";
        position: absolute;
        top: 50%;
        width: 20px;
        height: 1px;
        background: $g-color-white;
        transition: width .3s .2s;
        backface-visibility: hidden;
      }
    }

    .u-arrow-text {
      &::after {
        content: attr(data-title);
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        color: $g-color-white;
        text-transform: uppercase;
        opacity: 0;
        transition: transform 0.3s, opacity 0.3s;
        margin: 20px 5px 0;
      }
    }

    .u-arrow-img {
      opacity: 0;
      box-shadow: 0 1px 0 #fff, 0 -1px 0 #fff;
      transition: transform .3s, opacity .3s;
      transform: scale(.3);
    }

    &.js-prev {
      .u-arrow-icon {
        &::after {
          left: calc(100% - 25px);
        }
      }
    }

    &.js-next {
      .u-arrow-icon {
        &::after {
          right: calc(100% - 25px);
        }
      }

      .u-arrow-text {
        &::after {
          text-align: right;
        }
      }
    }

    &:hover {
      width: 200px;

      .u-arrow-icon {
        &::after {
          width: 200px;
          transition-delay: 0s;
        }
      }

      .u-arrow-text {
        pointer-events: auto;

        &::after {
          opacity: 1;
          transition-delay: .2s;
          transform: translateY(0);
        }
      }

      .u-arrow-img {
        opacity: 1;
        transform: scale(1);

        &:first-child {
          transition-delay: 0.3s;
        }

        &:nth-child(2) {
          transition-delay: 0.35s;
        }

        &:nth-child(3) {
          transition-delay: 0.4s;
        }
      }
    }
  }

  &-v10 {
    .u-arrow-text {
      opacity: 0;
      overflow: hidden;
      transform: scale(.7);
      transition: transform .3s, opacity .3s, background-color .1s 0s;
    }

    .u-arrow-img {
      transition: transform .3s;
    }

    &.js-prev {
      .u-arrow-img {
        transform: translateX(-100%);
      }
    }

    &.js-next {
      .u-arrow-img {
        transform: translateX(100%);
      }
    }

    &:hover {
      .u-arrow-text {
        opacity: 1;
        background-color: transparent;
        transform: scale(1);
        transition: transform .3s, opacity .3s, background-color .1s .2s;
      }

      .u-arrow-img {
        transform: translateX(0);
      }
    }
  }

  &-v11 {
    .u-arrow-icon {
      border-width: 0;
      transition: border-width .3s .15s;
    }

    .u-arrow-text {
      opacity: 0;
      transition: transform .3s, opacity .3s;
    }

    &.js-prev {
      .u-arrow-text {
        transform: translateY(-50%) translateX(-100%) scale(.75);
      }
    }

    &.js-next {
      .u-arrow-text {
        transform: translateY(-50%) translateX(100%) scale(.75);
      }
    }

    &:hover {
      .u-arrow-icon {
        border-top-width: 40px;
        border-bottom-width: 40px;
        transition-delay: 0s;
      }

      .u-arrow-text {
        opacity: 1;
        transition-delay: .3s;
        transform: translateY(-50%) translateX(0) scale(1);
      }
    }
  }

  &-v12 {
    .u-arrow-icon {
      position: relative;
      top: 50%;
      transform: translateY(-50%);

      &::before {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
      }
    }

    .u-arrow-text {
      overflow: hidden;
      transition: transform .3s;
      backface-visibility: hidden;
      transform: scale(.6);
    }

    .u-arrow-img {
      opacity: 0;
      backface-visibility: hidden;
      transition: opacity .3s, transform .3s;
    }

    &:hover {
      .u-arrow-img {
        opacity: .8;
      }
    }

    &.js-prev {
      .u-arrow-img {
        transform: translateX(-50%) translateY(-50%) rotate(45deg) scale(2);
      }

      &:hover {
        .u-arrow-text {
          transform: scale(1) rotate(-45deg);
        }

        .u-arrow-img {
          transform: translateX(-50%) translateY(-50%) rotate(45deg) scale(1);
        }
      }
    }

    &.js-next {
      .u-arrow-img {
        transform: translateX(-50%) translateY(-50%) rotate(-45deg) scale(2);
      }

      &:hover {
        .u-arrow-text {
          transform: scale(1) rotate(45deg);
        }

        .u-arrow-img {
          transform: translateX(-50%) translateY(-50%) rotate(-45deg) scale(1);
        }
      }
    }
  }

  &-v13 {
    .u-arrow-icon {
      overflow: hidden;
      backface-visibility: hidden;

      &::before {
        position: relative;
        z-index: 2;
      }

      &::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 110%;
        background: $g-color-white;
        backface-visibility: hidden;
        transition: transform .3s .3s;
      }
    }

    .u-arrow-text {
      transition: transform .3s;
    }

    &.js-prev {
      .u-arrow-icon {
        &::after {
          transform: translateX(-100%);
        }
      }

      .u-arrow-text {
        transform: translateX(-100%);
      }
    }

    &.js-next {
      .u-arrow-icon {
        &::after {
          transform: translateX(100%);
        }
      }

      .u-arrow-text {
        transform: translateX(100%);
      }
    }

    &:hover {
      .u-arrow-icon {
        &::after {
          transform: translateX(0);
          transition-delay: 0s;
        }
      }

      .u-arrow-text {
        transition-delay: .3s;
        transform: translateX(0);
      }
    }
  }

  &-v14 {
    &::before,
    &::after,
    .u-arrow-icon::before,
    .u-arrow-icon::after {
      content: "";
      position: absolute;
      left: 50%;
      width: 3px;
      height: 50%;
      background: $g-color-primary;
      transition: transform .3s;
      backface-visibility: hidden;
    }

    &::before,
    .u-arrow-icon::before {
      top: 50%;
      transform: translateX(-50%) rotate(-135deg);
      transform-origin: 50% 0;
    }

    &::after,
    .u-arrow-icon::after {
      top: 50%;
      transform: translateX(-50%) rotate(-45deg);
      transform-origin: 0 0;
    }

    .u-arrow-icon {
      &::before,
      &::after {
        z-index: 2;
        height: 0;
        background: $g-color-white;
        transition: height .3s, transform .3s;
      }
    }

    .u-arrow-title {
      position: absolute;
      top: 50%;
      opacity: 0;
      transition: transform .3s, opacity .3s;
      margin: 0;
    }

    &.js-prev {
      .u-arrow-title {
        left: 100%;
        transform: translateY(-50%) translateX(-50%);
      }
    }

    &.js-next {
      &::before,
      .u-arrow-icon::before {
        transform: translateX(-50%) rotate(135deg);
        transform-origin: 50% 0;
      }

      &::after,
      .u-arrow-icon::after {
        transform: translateX(-50%) rotate(45deg);
        transform-origin: 100% 0;
      }

      .u-arrow-title {
        right: 100%;
        text-align: right;
        transform: translateY(-50%) translateX(50%);
      }
    }

    &:hover {
      &::before,
      .u-arrow-icon::before {
        transform: translateX(-50%) rotate(-125deg);
      }

      &::after,
      .u-arrow-icon::after {
        transform: translateX(-50%) rotate(-55deg);
      }

      .u-arrow-icon {
        &::before,
        &::after {
          height: 50%;
        }
      }

      .u-arrow-title {
        opacity: 1;
        transform: translateY(-50%) translateX(0);
      }

      &.js-next {
        &::before,
        .u-arrow-icon::before {
          transform: translateX(-50%) rotate(125deg);
        }

        &::after,
        .u-arrow-icon::after {
          transform: translateX(-50%) rotate(55deg);
        }
      }
    }
  }
}

}