$ui-tooltip-triangle-width: 10px;

.ui-tooltip-container {
  position: relative;

  &:hover {
    .ui-tooltip {
      opacity: 1;
    }
  }
}

.ui-tooltip {
  position: absolute;
  z-index: 10;

  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  padding: 10px;

  color: ui-color(charcoal-darkest);
  text-align: center;

  background-color: ui-color(charcoal-ink-lightest);
  border-radius: $ui-br-border-radius;
  box-shadow: 0 0 40px 10px ui-color(paper-darkest);
  opacity: 0;

  transition: opacity 0.1s ease-out;

  will-change: opacity;

  &--visible {
    opacity: 1;
  }

  &::after {
    position: absolute;

    width: 0;
    height: 0;

    content: '';
  }

  &--bottom-center,
  &--top-center {
    left: 50%;

    &::after {
      right: 0;
      left: 0;
    }
  }

  &--bottom-center,
  &--bottom-left,
  &--bottom-right {
    bottom: 0;

    &::after {
      top: -$ui-tooltip-triangle-width;

      margin-right: auto;
      margin-left: auto;

      border-right: $ui-tooltip-triangle-width solid transparent;
      border-bottom: $ui-tooltip-triangle-width solid
        ui-color(charcoal-ink-medium);
      border-left: $ui-tooltip-triangle-width solid transparent;
    }
  }

  &--bottom-center {
    transform: translate(-50%, 95%);
  }

  &--bottom-left {
    left: 0;

    transform: translate(-75%, 95%);

    &::after {
      right: $ui-spacer;
    }
  }

  &--bottom-right {
    right: 0;

    transform: translate(75%, 95%);

    &::after {
      left: $ui-spacer;
    }
  }

  &--left,
  &--right {
    top: 50%;

    &::after {
      top: 0;
      bottom: 0;

      margin-top: auto;
      margin-bottom: auto;

      border-top: $ui-tooltip-triangle-width solid transparent;
      border-bottom: $ui-tooltip-triangle-width solid transparent;
    }
  }

  &--left {
    left: 0;

    transform: translate(-95%, -50%);

    &::after {
      right: -$ui-tooltip-triangle-width;

      border-left: $ui-tooltip-triangle-width solid
        ui-color(charcoal-ink-medium);
    }
  }

  &--right {
    right: 0;

    transform: translate(95%, -50%);

    &::after {
      left: -$ui-tooltip-triangle-width;

      border-right: $ui-tooltip-triangle-width solid
        ui-color(charcoal-ink-medium);
    }
  }

  &--top-center,
  &--top-left,
  &--top-right {
    top: 0;

    &::after {
      top: 100%;

      margin-right: auto;
      margin-left: auto;

      border-top: $ui-tooltip-triangle-width solid ui-color(charcoal-ink-medium);
      border-right: $ui-tooltip-triangle-width solid transparent;
      border-left: $ui-tooltip-triangle-width solid transparent;
    }
  }

  &--top-center {
    transform: translate(-50%, -95%);
  }

  &--top-left {
    left: 0;

    transform: translate(-75%, -95%);

    &::after {
      right: $ui-spacer;
    }
  }

  &--top-right {
    right: 0;

    transform: translate(75%, -95%);

    &::after {
      left: $ui-spacer;
    }
  }
}