// ============================================================================
// Quick-Jump Button — M3 FilledTonalIconButton
// ============================================================================
// Per spec: 8% state layer overlay on hover/focus using
// --color-surface-light with opacity.
// ============================================================================

.quick-jump-button {
  // M3 FilledTonalIconButton base: secondary container background
  // with on-secondary-container icon color. We rely on the M3 theme
  // token values provided by Angular Material, but override the
  // ripple/state-layer to use the 8% overlay pattern.

  // M3 state layer — 8% overlay on hover/focus
  // Using the project's custom surface-light token with opacity
  &::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-color: var(--cc-on-surface, #E2E8F0);
    opacity: 0;
    transition: opacity 200ms cubic-bezier(0.2, 0, 0, 1);
    pointer-events: none;
  }

  &:hover::after {
    opacity: 0.08; // 8% state layer
  }

  &:focus-visible::after {
    opacity: 0.08; // 8% state layer on focus
  }

  &:active::after {
    opacity: 0.12; // 12% pressed state per M3 spec
  }
}