.tooltip {
  --bg: #{color.$ui-gray-700};

  @include Typography.Body(S);

  background: var(--bg);
  padding: scale.$sm--3 scale.$sm--1;
  border-radius: 2px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.05), 0px 4px 4px rgba(0, 0, 0, 0.1);
  max-width: 30em;
  transition-duration: 150ms;

  #qunit-fixture & {
    transition: none;
  }

  small {
    display: block;
    padding-top: scale.$sm--4;
    padding-bottom: scale.$sm--4;
  }

  &[x-placement^='top'] .ember-tooltip-arrow {
    border-top-color: var(--bg);
  }
  &[x-placement^='bottom'] .ember-tooltip-arrow {
    border-bottom-color: var(--bg);
  }
  &[x-placement^='left'] .ember-tooltip-arrow {
    border-left-color: var(--bg);
  }
  &[x-placement^='right'] .ember-tooltip-arrow {
    border-right-color: var(--bg);
  }
}
