@use '../../theme/styles' as theme;
@use '../../overlay/styles'; // shared .wr-overlay-sheet / .wr-overlay-backdrop for responsive mode

.wr-popover-overlay {
  > * {
    display: block;
    min-width: 8rem;
    max-width: 22rem;
    background: var(--wr-color-white);
    border: 1px solid var(--wr-color-light);
    @include theme.smooth-br(var(--wr-border-radius-base));
    box-shadow: var(--wr-shadow-overlay);
    font-family: var(--wr-font-family-base);
    color: var(--wr-color-dark);
    animation: wr-overlay-in var(--wr-overlay-duration) var(--wr-overlay-ease);
    transform-origin: top left;
  }
}

//
// Tooltip mode — small dark text panel rendered inside the overlay.
// (Folded in from the deprecated wr-tooltip entry-point; use
// `<… [wrPopover]="'text'" mode="tooltip">` instead.)
//

.wr-tooltip-overlay {
  pointer-events: none;
}

.wr-tooltip {
  position: relative;
  display: inline-block;
  max-width: 18rem;
  padding: 0.3125rem 0.5rem;
  background: var(--wr-color-dark);
  color: var(--wr-color-dark-contrast);
  border-radius: var(--wr-border-radius-sm);
  font-family: var(--wr-font-family-base);
  font-size: var(--wr-text-xs);
  line-height: 1rem;
  box-shadow: var(--wr-shadow-overlay);
  animation: wr-overlay-in var(--wr-overlay-duration) var(--wr-overlay-ease);
  transform-origin: top left;

  // Arrow
  &::after {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    background: var(--wr-color-dark);
    transform: rotate(45deg);
  }
}

// Arrow placement is dictated by the overlay panel's position modifier
// (the wr-tooltip-overlay--top|bottom|left|right class lives on the
// portal host wrapping the tooltip).
.wr-tooltip-overlay--top .wr-tooltip::after {
  left: 50%;
  bottom: -3px;
  margin-left: -3px;
}
.wr-tooltip-overlay--bottom .wr-tooltip::after {
  left: 50%;
  top: -3px;
  margin-left: -3px;
}
.wr-tooltip-overlay--left .wr-tooltip::after {
  top: 50%;
  right: -3px;
  margin-top: -3px;
}
.wr-tooltip-overlay--left-start .wr-tooltip::after {
  top: 0.625rem;
  right: -3px;
}
.wr-tooltip-overlay--left-end .wr-tooltip::after {
  bottom: 0.625rem;
  right: -3px;
}
.wr-tooltip-overlay--right .wr-tooltip::after {
  top: 50%;
  left: -3px;
  margin-top: -3px;
}
.wr-tooltip-overlay--right-start .wr-tooltip::after {
  top: 0.625rem;
  left: -3px;
}
.wr-tooltip-overlay--right-end .wr-tooltip::after {
  bottom: 0.625rem;
  left: -3px;
}

@media (prefers-reduced-motion: reduce) {
  .wr-tooltip {
    animation: none;
  }
}