@use "../../foundations/helpers/forward.helpers.scss" as *;
@use "../../foundations/variables/typographyFontWeight.scss";
@use "../../components/icon-sprite/icon-sprite.scss";
@use "../../components/button/button.scss";

.ds-tooltip {
  background-color: $ds-color-surface-primary-raised-strong;
  color: $ds-color-text-primary;
  box-sizing: border-box;
  position: relative;
  padding: ds-spacing($ds-s-100);
  display: flex;

  .ds-tooltip__close {
    color: $ds-color-text-primary;
    align-self: center;
    margin-left: ds-spacing($ds-s-100);
  }

  &--hidden {
    display: none;
  }

  &.ds-tooltip--arrow-top::after,
  &.ds-tooltip--arrow-bottom::after {
    border-bottom-color: $ds-color-surface-primary-raised-strong;
  }

  &--arrow-top::after {
    content: "";
    position: absolute;
    top: ds-spacing($ds-s-100, "px", true);
    right: ds-spacing($ds-s-100);
    border: 8px solid transparent;
  }

  &--arrow-bottom::after {
    content: "";
    position: absolute;
    bottom: ds-spacing($ds-s-100, "px", true);
    left: ds-spacing($ds-s-100);
    border: 8px solid transparent;
    transform: rotate(180deg);
  }

  .ds-tooltip__content {
    @include ds-typography($ds-typography-functional-body-sm);

    h2 {
      margin: 0;
      @include ds-typography($ds-typography-functional-body-md, $fontWeight: $ds-fontweight-semibold);

      + p {
        margin-top: 0;
      }
    }

    > :last-child {
      margin-bottom: 0;
    }
  }
}