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

// ── Dauer-Hilfe Tooltip ───────────────────────────────────────────────────────
// Zeigt "?" an, auf Hover klappt der Hilfetext aus

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

  &__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:
      width $transition-base,
      opacity $transition-base,
      border $transition-base,
      margin $transition-base;
    overflow: hidden;
  }

  &__hint {
    font-size: $font-size-xs;
    color: $color-text-muted;
    white-space: nowrap;
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    transition:
      max-width 0.28s ease,
      opacity 0.2s ease;
  }

  &:hover &__icon {
    width: 0;
    opacity: 0;
    border-width: 0;
    margin-right: 0;
  }

  &:hover &__hint {
    max-width: 500px;
    opacity: 1;
  }
}