/*
* Tooltip component
*
*/

@use '../../../style/core/utilities.scss' as utilities;

:root {
  --tooltip-z-index: var(--z-index-tooltip);
}

.dnb-tooltip {
  --inner-space: 0;
  --tooltip-border-radius: var(--token-radius-full);

  // Set design tokens for tooltip
  --popover-text-color: var(--token-color-text-neutral-inverse);
  --popover-background-color: var(
    --token-color-component-tooltip-background-neutral
  );

  z-index: var(--tooltip-z-index);
  .dnb-popover--inside-modal & {
    z-index: calc(var(--modal-z-index) + var(--tooltip-z-index));
  }

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-width: auto;

  text-align: center;

  border-radius: var(--tooltip-border-radius);
  @include utilities.defaultDropShadow();

  &--large {
    padding: 0.25rem 0;
  }

  .dnb-popover {
    &__content {
      min-width: 2rem;
      min-height: 1.5rem;

      padding: 0 1rem;
    }

    &__arrow__placement {
      &--right {
        left: -13px;
        top: auto !important;
      }
      &--left {
        right: -13px;
        top: auto !important;
      }
    }
  }
}