@mixin pop-arrow($name) {
  // bottom side
  &-bottom-left,
  &-bottom-center,
  &-bottom-right {
    .zent-#{$name}-arrow {
      top: 0;
    }

    &::after {
      top: -var(--CSS_ARROW_COVER_SIZE);
      width: 100%;
      left: 0;
    }
  }

  &-bottom-left {
    .zent-#{$name}-arrow {
      transform: translateY(-50%) rotate(45deg);
      left: var(--CSS_ARROW_OFFSET_HORIZONTAL);
    }
  }

  &-bottom-center {
    .zent-#{$name}-arrow {
      transform: translate(-50%, -50%) rotate(45deg);
      left: 50%;
    }
  }

  &-bottom-right {
    .zent-#{$name}-arrow {
      transform: translateY(-50%) rotate(45deg);
      right: var(--CSS_ARROW_OFFSET_HORIZONTAL);
    }
  }

  // top side
  &-top-left,
  &-top-center,
  &-top-right {
    .zent-#{$name}-arrow {
      bottom: 0;
    }

    &::after {
      bottom: -var(--CSS_ARROW_COVER_SIZE);
      width: 100%;
      left: 0;
    }
  }

  &-top-left {
    .zent-#{$name}-arrow {
      transform: translateY(50%) rotate(45deg);
      left: var(--CSS_ARROW_OFFSET_HORIZONTAL);
    }
  }

  &-top-center {
    .zent-#{$name}-arrow {
      transform: translate(-50%, 50%) rotate(45deg);
      left: 50%;
    }
  }

  &-top-right {
    .zent-#{$name}-arrow {
      transform: translateY(50%) rotate(45deg);
      right: var(--CSS_ARROW_OFFSET_HORIZONTAL);
    }
  }

  // left side
  &-left-top,
  &-left-center,
  &-left-bottom {
    .zent-#{$name}-arrow {
      right: 0;
    }

    &::after {
      right: -var(--CSS_ARROW_COVER_SIZE);
      height: 100%;
      top: 0;
    }
  }

  &-left-top {
    .zent-#{$name}-arrow {
      transform: translateX(50%) rotate(45deg);
      top: var(--CSS_ARROW_OFFSET_VERTICAL);
    }
  }

  &-left-center {
    .zent-#{$name}-arrow {
      transform: translate(50%, -50%) rotate(45deg);
      top: 50%;
    }
  }

  &-left-bottom {
    .zent-#{$name}-arrow {
      transform: translateX(50%) rotate(45deg);
      bottom: var(--CSS_ARROW_OFFSET_VERTICAL);
    }
  }

  // left side
  &-right-top,
  &-right-center,
  &-right-bottom {
    .zent-#{$name}-arrow {
      left: 0;
    }

    &::after {
      left: -var(--CSS_ARROW_COVER_SIZE);
      height: 100%;
      top: 0;
    }
  }

  &-right-top {
    .zent-#{$name}-arrow {
      transform: translateX(-50%) rotate(45deg);
      top: var(--CSS_ARROW_OFFSET_VERTICAL);
    }
  }

  &-right-center {
    .zent-#{$name}-arrow {
      transform: translate(-50%, -50%) rotate(45deg);
      top: 50%;
    }
  }

  &-right-bottom {
    .zent-#{$name}-arrow {
      transform: translateX(-50%) rotate(45deg);
      bottom: var(--CSS_ARROW_OFFSET_VERTICAL);
    }
  }
}