// ============================================================================
// Quick-Jump Button — M3 FilledTonalIconButton
// Per spec Section 7.3: Agent Card Quick-Jump action
// M3 spec: FilledTonalIconButton uses secondary container color
// with 8% state layer overlay for hover/focus.
// ============================================================================

.quick-jump-button {
  // M3 FilledTonalIconButton: secondary-container background
  // Angular Material mat-icon-button sets up the base shape (40x40, round).
  // We override the color tokens to match FilledTonal style.
  --mdc-icon-button-icon-color: var(--mat-sys-on-secondary-container);
  background-color: var(--mat-sys-secondary-container);
  border-radius: 50%;
  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);

  // M3 State Layer: 8% overlay on hover
  &:hover {
    background-color: var(--mat-sys-secondary-container);
    // State layer overlay using a pseudo-element for precise 8% opacity
    &::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 50%;
      background-color: var(--mat-sys-on-secondary-container);
      opacity: 0.08;
      pointer-events: none;
    }
  }

  // M3 State Layer: 12% overlay on focus-visible (slightly stronger for accessibility)
  &:focus-visible {
    background-color: var(--mat-sys-secondary-container);
    outline: 3px solid var(--status-active);
    outline-offset: 2px;

    &::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 50%;
      background-color: var(--mat-sys-on-secondary-container);
      opacity: 0.12;
      pointer-events: none;
    }
  }

  // M3 State Layer: 12% overlay on active/pressed
  &:active {
    background-color: var(--mat-sys-secondary-container);

    &::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 50%;
      background-color: var(--mat-sys-on-secondary-container);
      opacity: 0.12;
      pointer-events: none;
    }
  }

  // Icon color stays on-secondary-container across all states
  .mat-icon {
    color: var(--mat-sys-on-secondary-container);
  }
}