.sui-a-tooltip {
  z-index: $sui-z-index-a-tooltip;
  display: inline-block;
  background: $sui-color-brand-denim-800;
  color: $sui-color-brand-denim-100;
  font-size: $sui-font-size-ms;
  padding: $sui-space-xs $sui-space-sm;
  border-radius: $sui-border-radius-md;
  text-align: center;
  box-shadow: $sui-shadow-200;
  position: relative;

  &__arrow {
    width: $sui-a-tooltip-arrow-size;
    height: $sui-a-tooltip-arrow-size;
    transform: rotate(45deg);
    color: $sui-color-brand-denim-800;
    position: absolute;
    background: $sui-color-brand-denim-800;
    box-shadow: $sui-shadow-200;

    &::after {
      content: '';
      display: block;
      position: absolute;
    }
  }

  &__inner {
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;

    &.as--sm {
      max-height: rem(160);
    }

    &.as--md {
      max-height: rem(224);
    }

    &.as--lg {
      max-height: rem(328);
    }
  }

  &__item {
    overflow: hidden;
    padding: $sui-space-xs 0;
  }

  // -------------------------
  //    Colors
  // -------------------------

  @include suiTooltipColor('as--light', $sui-color-brand-denim-100);
  @include suiTooltipColor('as--dark', $sui-color-brand-denim-900);
  @include suiTooltipColor('as--primary', $sui-color-primary);
  @include suiTooltipColor('as--secondary', $sui-color-brand-denim-300);
  @include suiTooltipColor('as--success', $sui-color-success);
  @include suiTooltipColor('as--warning', $sui-color-warning);
  @include suiTooltipColor('as--danger', $sui-color-danger);
  @include suiTooltipColor('as--new', $sui-color-heliotrope);

  // -------------------------
  //    Vertical placement
  // -------------------------
  &.as--placement-top &__arrow,
  &.as--placement-bottom &__arrow,
  &[x-placement^="top"] &__arrow,
  &[x-placement^="bottom"] &__arrow {
    left: 50%;
    margin-left: -$sui-a-tooltip-arrow-size*0.5;

    &::after {
      width: rem(20);
      height: rem(6);
      transform: rotate(-45deg);
    }
  }

  // Top
  &.as--placement-top,
  &[x-placement^="top"] {
    margin-bottom: $sui-a-tooltip-arrow-size;

    &::after {
      content: '';
      position: absolute;
      left: 0;
      bottom: -$sui-a-tooltip-arrow-size;
      width: 100%;
      height: $sui-a-tooltip-arrow-size;
    }
  }

  &.as--placement-top &__arrow,
  &[x-placement^="top"] &__arrow {
    bottom: rem(-3);

    &::after {
      right: rem(-4);
      bottom: rem(2);
    }
  }

  // Bottom
  &.as--placement-bottom,
  &[x-placement^="bottom"] {
    margin-top: $sui-a-tooltip-arrow-size;

    &::after {
      content: '';
      position: absolute;
      left: 0;
      top: -$sui-a-tooltip-arrow-size;
      width: 100%;
      height: $sui-a-tooltip-arrow-size;
    }
  }

  &.as--placement-bottom &__arrow,
  &[x-placement^="bottom"] &__arrow {
    top: rem(-3);

    &::after {
      left: rem(-4);
      top: rem(2);
    }
  }

  // -------------------------
  //    Horizontal placement
  // -------------------------
  &.as--placement-left &__arrow,
  &.as--placement-right &__arrow,
  &[x-placement^="left"] &__arrow,
  &[x-placement^="right"] &__arrow {
    top: 50%;
    margin-top: -$sui-a-tooltip-arrow-size*0.5;

    &::after {
      width: rem(8);
      height: rem(20);
      transform: rotate(-45deg);
    }
  }

  // Left
  &.as--placement-left,
  &[x-placement^="left"] {
    margin-right: $sui-a-tooltip-arrow-size;

    &::after {
      content: '';
      position: absolute;
      right: -$sui-a-tooltip-arrow-size;
      top: 0;
      width: $sui-a-tooltip-arrow-size;
      height: 100%;
    }
  }

  &.as--placement-left &__arrow,
  &[x-placement^="left"] &__arrow {
    right: rem(-3);

    &::after {
      right: rem(2);
      bottom: rem(-10);
    }
  }

  // Right
  &.as--placement-right,
  &[x-placement^="right"] {
    margin-left: $sui-a-tooltip-arrow-size;

    &::after {
      content: '';
      position: absolute;
      left: -$sui-a-tooltip-arrow-size;
      top: 0;
      width: $sui-a-tooltip-arrow-size;
      height: 100%;
    }
  }

  &.as--placement-right &__arrow,
  &[x-placement^="right"] &__arrow {
    left: rem(-3);

    &::after {
      left: rem(2);
      top: rem(-10);
    }
  }
}
