STooltip {
  position: relative;
  padding: var(--intergalactic-spacing-3x, 12px);
  border-radius: var(--intergalactic-popper-rounded, 6px);
  box-sizing: border-box;
  color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
  font-size: var(--intergalactic-fs-200, 14px);
  line-height: var(--intergalactic-lh-200, 142%);
  word-wrap: break-word;
  max-width: 228px;
  font-weight: normal;
  white-space: normal;
  box-shadow: var(--intergalactic-box-shadow-popper, 1px 1px 10px 0px oklch(0.176 0.033 175.7 / 0.07));
}

/* stylelint-disable-next-line no-duplicate-selectors */
STooltip {
  background-color: var(--intergalactic-tooltip-default, oklch(1 0 0));
  border: 1px solid var(--intergalactic-border-secondary, oklch(0.176 0.033 175.7 / 0.07));
}

STooltip[theme='invert'] {
  color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
  background-color: var(--intergalactic-tooltip-invert, oklch(0.23 0.01 140));
  border: 1px solid var(--intergalactic-border-tooltip-invert, oklch(0.995 0.008 145.9 / 0.369));
}

STooltip[theme='warning'] {
  background-color: var(--intergalactic-tooltip-warning, oklch(0.958 0.029 5.7));
  border: 1px solid var(--intergalactic-border-critical-active, oklch(0.7 0.21 23));
}

SArrow {
  position: absolute;
  border: 6px solid;

  &:before {
    content: '';
    position: absolute;
    border: 6px solid;
  }
}

/* stylelint-disable-next-line no-duplicate-selectors */
SArrow {
  border-color: var(--intergalactic-border-secondary, oklch(0.176 0.033 175.7 / 0.07));

  /* stylelint-disable-next-line no-duplicate-selectors */
  &:before {
    border-color: var(--intergalactic-tooltip-default, oklch(1 0 0));
  }
}

SArrow[theme='invert'] {
  border-color: var(--intergalactic-border-tooltip-invert, oklch(0.995 0.008 145.9 / 0.369));

  &::before {
    border-color: var(--intergalactic-tooltip-invert, oklch(0.23 0.01 140));
  }
}

SArrow[theme='warning'] {
  border-color: var(--intergalactic-border-critical-active, oklch(0.7 0.21 23));

  &::before {
    border-color: var(--intergalactic-tooltip-warning, oklch(0.958 0.029 5.7));
  }
}

SArrow[bgColor] {
  border-color: var(--shadowColor);

  &::before {
    border-color: var(--bgColor);
  }
}

STooltip[data-popper-placement^='top'] SArrow {
  top: 100%;

  border-bottom: 0 transparent;
  border-right-color: transparent !important;
  border-left-color: transparent !important;

  &::before {
    top: -7px;
    left: -6px;

    border-bottom: 0 transparent;
    border-right-color: transparent !important;
    border-left-color: transparent !important;
  }
}

STooltip[data-popper-placement^='bottom'] SArrow {
  bottom: 100%;

  border-top: 0 transparent;
  border-right-color: transparent !important;
  border-left-color: transparent !important;

  &::before {
    top: 1px;
    left: -6px;

    border-top: 0 transparent;
    border-right-color: transparent !important;
    border-left-color: transparent !important;
  }
}

STooltip[data-popper-placement^='left'] SArrow {
  left: 100%;

  border-right: 0 transparent;
  border-top-color: transparent !important;
  border-bottom-color: transparent !important;

  &::before {
    top: -6px;
    left: -7px;

    border-right: 0 transparent;
    border-top-color: transparent !important;
    border-bottom-color: transparent !important;
  }
}

STooltip[data-popper-placement^='right'] SArrow {
  right: 100%;

  border-left: 0 transparent;
  border-top-color: transparent !important;
  border-bottom-color: transparent !important;

  &::before {
    top: -6px;
    left: 1px;

    border-left: 0 transparent;
    border-top-color: transparent !important;
    border-bottom-color: transparent !important;
  }
}

STooltipPortalledWrapper {
  position: absolute;
}