@import "../settings.colors";

@import "settings.fonts";
@import "tools.mixins";

@mixin c-tooltip {
  position: absolute;
  z-index: 1;
  // The delay is for the "hide" transition, not the "reveal" transition. See:
  // https://stackoverflow.com/a/20328000/1243086
  transition: visibility 0s linear 0.2s, opacity 0.2s linear;

  // Tooltip is hidden by default
  @include c-tooltip--hidden;

  // Triangle
  &::after,
  &::before {
    position: absolute;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
  }
  // Inner triangle
  &::after {
    border-bottom-color: $color-stone-150;
    border-width: rem(5);
    margin-right: rem(-5);
  }
  // Outer triangle (border)
  &::before {
    border-bottom-color: $color-stone-300;
    border-width: rem(7);
    margin-right: rem(-7);
  }
}

// Visually hide the dropdown menu but leave it accessible to screen readers
@mixin c-tooltip--hidden {
  opacity: 0;
  visibility: hidden;
}

@mixin c-tooltip--visible {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

@mixin c-tooltip-inner {
  position: relative;
  background: $color-stone-150;
  border: 1px solid $color-stone-300;
  border-radius: rem(2);
}

@mixin c-tooltip-text {
  @include font-gm-sans;
  @include css-variables("font-size", 15);
  line-height: line-height(15, 17);
  letter-spacing: rem(.3);
  color: $color-grey-900;
  padding: rem(10);
}

// ------------------------------------
// Alignment and positioning
// ------------------------------------

@mixin c-tooltip-positions($prefix) {
  // Vertical alignment
  .#{$prefix}--pos-top {
    @include c-tooltip--pos-top($prefix);
  }
  .#{$prefix}--pos-middle {
    @include c-tooltip--pos-middle($prefix);
  }
  .#{$prefix}--pos-bottom {
    @include c-tooltip--pos-bottom($prefix);
  }
  // Horizontal alignment
  .#{$prefix}--pos-left {
    @include c-tooltip--pos-left;
  }
  .#{$prefix}--pos-center {
    @include c-tooltip--pos-center;
  }
  .#{$prefix}--pos-right {
    @include c-tooltip--pos-right;
  }
  // Horizontal alignment for "middle" position
  .#{$prefix}--pos-middle {
    &.#{$prefix}--pos-left {
      @include c-tooltip--pos-middle-left($prefix);
    }
    &.#{$prefix}--pos-right {
      @include c-tooltip--pos-middle-right($prefix);
    }
  }
}

// Vertical alignment
@mixin c-tooltip--pos-top($prefix) {
  &::after,
  &::before {
    top: auto;
    margin-top: 0;
    transform: rotate(180deg);
  }
  &::after {
    bottom: rem(-4);
  }
  &::before {
    bottom: rem(-8);
  }
  .#{$prefix}__inner {
    margin-top: 0;
    margin-bottom: rem(5);
  }
}

@mixin c-tooltip--pos-middle($prefix) {
  &::after,
  &::before {
    top: 50%;
    bottom: auto;
    transform: none;
  }
  &::after {
    margin-top: rem(-5);
  }
  &::before {
    margin-top: rem(-7);
  }
  .#{$prefix}__inner {
    margin-top: 0;
    margin-bottom: 0;
  }
}

@mixin c-tooltip--pos-bottom($prefix) {
  &::after,
  &::before {
    bottom: auto;
    margin-top: 0;
    transform: none;
  }
  &::after {
    top: rem(-4);
  }
  &::before {
    top: rem(-8);
  }
  .#{$prefix}__inner {
    margin-top: rem(5);
    margin-bottom: 0;
  }
}

// Horizontal alignment
@mixin c-tooltip--pos-left {
  &::after {
    left: rem(16);
    right: auto;
  }
  &::before {
    left: rem(14);
    right: auto;
  }
}

@mixin c-tooltip--pos-center {
  &::after {
    left: calc(50% - #{rem(5)}); // Subtract half of shape's width
    right: auto;
  }
  &::before {
    left: calc(50% - #{rem(7)}); // Subtract half of shape's width
    right: auto;
  }
}

@mixin c-tooltip--pos-right {
  &::after,
  &::before {
    left: auto;
    right: rem(21);
  }
}

// Horizontal alignment for "middle" position
@mixin c-tooltip--pos-middle-left($prefix) {
  &::after,
  &::before {
    left: auto;
    transform: rotate(90deg);
  }
  &::after {
    right: rem(3);
  }
  &::before {
    right: rem(1);
  }
  .#{$prefix}__inner {
    margin-right: rem(7);
  }
}

@mixin c-tooltip--pos-middle-right($prefix) {
  &::after,
  &::before {
    right: auto;
    transform: rotate(-90deg);
  }
  &::after {
    left: rem(-2);
  }
  &::before {
    left: rem(-6);
  }
  .#{$prefix}__inner {
    margin-left: rem(7);
  }
}

// ------------------------------------
// Themes
// ------------------------------------

@mixin c-tooltip-themes($prefix) {
  .#{$prefix}--white {
    @include c-tooltip--white($prefix);
  }
  .#{$prefix}--dark {
    @include c-tooltip--dark($prefix);
  }
  .#{$prefix}--blue-primary {
    @include c-tooltip--dark($prefix);

    &::after {
      border-bottom-color: $color-blue-500;
    }
    .#{$prefix}__inner {
      background-color: $color-blue-500;
    }
  }
}

@mixin c-tooltip--white($prefix) {
  &::after {
    border-bottom-color: $color-white;
  }
  &::before {
    border-bottom-color: $color-stone-500;
  }
  .#{$prefix}__inner {
    background-color: $color-white;
    border-color: $color-stone-500;
  }
}

@mixin c-tooltip--dark($prefix) {
  &::after {
    border-bottom-color: $color-grey-700;
  }
  &::before {
    border-bottom-color: $color-grey-300;
  }
  .#{$prefix}__inner {
    background-color: $color-grey-700;
    border-color: $color-grey-300;
    color: $color-white;
  }
}
