$cooltipz-margin: calc(var(--cooltipz-arrow-size, #{$cooltipz-arrow-size}) * 2);
$cooltipz-corner-direction-position: calc(var(--cooltipz-arrow-size, #{$cooltipz-arrow-size}) / 2);
$cooltipz-y-direction-position: calc(100% - (var(--cooltipz-arrow-size, #{$cooltipz-arrow-size}) / 2));

@mixin dir-top {
  &[data-cooltipz-dir = "top"],
  &.cooltipz--top {
    &::after {
      margin-bottom: $cooltipz-margin;
    }

    &::before {
      @extend %arrow-down;
    }

    &::after,
    &::before {
      bottom: $cooltipz-y-direction-position;
      left: 50%;
      transform: translate(-50%, var(--cooltipz-slide, #{$cooltipz-slide}));
      transform-origin: top;
    }

    &:hover,
    &:focus,
    &[data-cooltipz-visible],
    &.cooltipz--visible {
      &::after,
      &::before {
        transform: translate(-50%, 0);
      }
    }
  }
}

@mixin dir-top-left {
  &[data-cooltipz-dir = "top-left"],
  &.cooltipz--top-left {
    &::after {
      left: 0;
      margin-bottom: $cooltipz-margin;
    }

    &::before {
      @extend %arrow-down;
      left: $cooltipz-corner-direction-position;
    }

    &::after,
    &::before {
      bottom: $cooltipz-y-direction-position;
      transform: translate(0, var(--cooltipz-slide, #{$cooltipz-slide}));
      transform-origin: top;
    }

    &:hover,
    &:focus,
    &[data-cooltipz-visible],
    &.cooltipz--visible {
      &::after,
      &::before {
        transform: translate(0);
      }
    }
  }
}

@mixin dir-top-right {
  &[data-cooltipz-dir = "top-right"],
  &.cooltipz--top-right {
    &::after {
      margin-bottom: $cooltipz-margin;
      right: 0;
    }

    &::before {
      @extend %arrow-down;
      right: $cooltipz-corner-direction-position;
    }

    &::after,
    &::before {
      bottom: $cooltipz-y-direction-position;
      transform: translate(0, var(--cooltipz-slide, #{$cooltipz-slide}));
      transform-origin: top;
    }

    &:hover,
    &:focus,
    &[data-cooltipz-visible],
    &.cooltipz--visible {
      &::after,
      &::before {
        transform: translate(0);
      }
    }
  }
}

@mixin dir-bottom {
  &[data-cooltipz-dir = "bottom"],
  &.cooltipz--bottom {
    &::after {
      margin-top: $cooltipz-margin;
    }

    &::before {
      @extend %arrow-up;
    }

    &::after,
    &::before {
      left: 50%;
      top: $cooltipz-y-direction-position;
      transform: translate(-50%, calc(var(--cooltipz-slide, #{$cooltipz-slide}) * -1));
      transform-origin: bottom;
    }

    &:hover,
    &:focus,
    &[data-cooltipz-visible],
    &.cooltipz--visible {
      &::after,
      &::before {
        transform: translate(-50%, 0);
      }
    }
  }
}

@mixin dir-bottom-left {
  &[data-cooltipz-dir = "bottom-left"],
  &.cooltipz--bottom-left {
    &::after {
      left: 0;
      margin-top: $cooltipz-margin;
    }

    &::before {
      @extend %arrow-up;
      left: $cooltipz-corner-direction-position;
    }

    &::after,
    &::before {
      top: $cooltipz-y-direction-position;
      transform: translate(0, calc(var(--cooltipz-slide, #{$cooltipz-slide}) * -1));
      transform-origin: bottom;
    }

    &:hover,
    &:focus,
    &[data-cooltipz-visible],
    &.cooltipz--visible {
      &::after,
      &::before {
        transform: translate(0);
      }
    }
  }
}

@mixin dir-bottom-right {
  &[data-cooltipz-dir = "bottom-right"],
  &.cooltipz--bottom-right {
    &::after {
      margin-top: $cooltipz-margin;
      right: 0;
    }

    &::before {
      @extend %arrow-up;
      right: $cooltipz-corner-direction-position;
    }

    &::after,
    &::before {
      top: $cooltipz-y-direction-position;
      transform: translate(0, calc(var(--cooltipz-slide, #{$cooltipz-slide}) * -1));
      transform-origin: bottom;
    }

    &:hover,
    &:focus,
    &[data-cooltipz-visible],
    &.cooltipz--visible {
      &::after,
      &::before {
        transform: translate(0);
      }
    }
  }
}

@mixin dir-left {
  &[data-cooltipz-dir = "left"],
  &.cooltipz--left {
    &::after {
      margin-right: $cooltipz-margin;
    }

    &::before {
      @extend %arrow-right;
    }

    &::after,
    &::before {
      right: $cooltipz-y-direction-position;
      top: 50%;
      transform: translate(var(--cooltipz-slide, #{$cooltipz-slide}), -50%);
      transform-origin: left;
    }

    &:hover,
    &:focus,
    &[data-cooltipz-visible],
    &.cooltipz--visible {
      &::after,
      &::before {
        transform: translate(0, -50%);
      }
    }
  }
}

@mixin dir-right {
  &[data-cooltipz-dir = "right"],
  &.cooltipz--right {
    &::after {
      margin-left: $cooltipz-margin;
    }

    &::before {
      @extend %arrow-left;
    }

    &::after,
    &::before {
      left: $cooltipz-y-direction-position;
      top: 50%;
      transform: translate(calc(var(--cooltipz-slide, #{$cooltipz-slide}) * -1), -50%);
      transform-origin: right;
    }

    &:hover,
    &:focus,
    &[data-cooltipz-visible],
    &.cooltipz--visible {
      &::after,
      &::before {
        transform: translate(0, -50%);
      }
    }
  }
}