@use '../atoms/variables' as *;

// ── Dauer-Hilfe Tooltip ───────────────────────────────────────────────────────
// Zeigt "?" an, auf Hover klappt der Hilfetext aus (absolut positioniert,
// damit er die Grid-Spaltenbreite nicht verschiebt).

.duration-help {
  display: inline-flex;
  align-items: center;
  cursor: help;
  flex-shrink: 0;
  position: relative;

  &__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid $color-border;
    background: $color-white;
    color: $color-text-muted;
    font-size: $font-size-xs;
    font-weight: $font-weight-bold;
    flex-shrink: 0;
    transition: opacity $transition-fast;
  }

  &__hint {
    position: absolute;
    left: calc(100% + #{$space-2});
    top: 50%;
    transform: translateY(-50%);
    font-size: $font-size-xs;
    color: $color-text-muted;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }

  &:hover &__icon {
    opacity: 0;
  }

  &:hover &__hint {
    opacity: 1;
  }
}