/* =============================================================
   Componente — botão
   Estados cobertos: default, hover, active, focus-visible,
   disabled, loading, e as variantes semânticas de ação.
   ============================================================= */

@layer components {

  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: var(--tap-target);
    padding: var(--space-3) var(--space-5);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    font-family: var(--font-display);
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition:
      background-color var(--dur-fast) var(--ease-out),
      border-color var(--dur-fast) var(--ease-out),
      color var(--dur-fast) var(--ease-out),
      transform var(--dur-instant) var(--ease-out);
  }

  .btn > svg {
    width: var(--icon-md);
    height: var(--icon-md);
    flex: none;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .btn:active:not(:disabled) {
    transform: scale(0.98);
  }

  .btn:focus-visible {
    outline: 2px solid var(--palette-blue-300);
    outline-offset: 2px;
  }

  .btn:disabled,
  .btn[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
  }

  /* ----- Variantes ----- */

  .btn--primary {
    background-color: var(--accent-fill);
    color: var(--text-on-accent);
    box-shadow: var(--shadow-2);
  }

  .btn--primary:hover:not(:disabled) {
    background-color: var(--accent-fill-hover);
  }

  .btn--inverse {
    background-color: var(--surface-inverse);
    color: var(--text-on-inverse);
    box-shadow: var(--shadow-2);
  }

  .btn--inverse:hover:not(:disabled) {
    background-color: var(--palette-mist-050);
  }

  .btn--positive {
    background-color: var(--positive-fill);
    color: var(--text-on-accent);
  }

  .btn--positive:hover:not(:disabled) {
    background-color: var(--positive-fill-hover);
  }

  .btn--danger {
    background-color: var(--danger-fill);
    color: var(--text-on-accent);
  }

  .btn--danger:hover:not(:disabled) {
    background-color: var(--danger-fill-hover);
  }

  /* Secundário precisa de preenchimento + borda perceptível para
     não "sumir" sobre o fundo escuro. */
  .btn--secondary {
    background-color: var(--surface-overlay);
    border-color: var(--border-control);
    color: var(--text-strong);
  }

  .btn--secondary:hover:not(:disabled) {
    background-color: var(--surface-pressed);
    border-color: var(--border-control-hover);
  }

  .btn--ghost {
    background-color: transparent;
    color: var(--text-default);
  }

  .btn--ghost:hover:not(:disabled) {
    background-color: var(--surface-hover);
    color: var(--text-strong);
  }

  /* ----- Tamanhos ----- */

  .btn--sm {
    min-height: 2.25rem;
    padding: var(--space-2) var(--space-4);
    font-size: var(--fs-sm);
    border-radius: var(--radius-pill);
  }

  .btn--sm > svg {
    width: var(--icon-sm);
    height: var(--icon-sm);
  }

  .btn--lg {
    min-height: 3.25rem;
    font-size: var(--fs-lg);
  }

  .btn--block {
    display: flex;
    width: 100%;
  }

  /* ----- Botão só de ícone ----- */

  .btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--tap-target);
    block-size: var(--tap-target);
    flex: none;
    border-radius: var(--radius-circle);
    color: var(--text-strong);
    cursor: pointer;
    transition:
      background-color var(--dur-fast) var(--ease-out),
      color var(--dur-fast) var(--ease-out);
  }

  .btn-icon > svg {
    width: var(--icon-lg);
    height: var(--icon-lg);
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .btn-icon:hover {
    background-color: var(--surface-hover);
  }

  .btn-icon:active {
    background-color: var(--surface-pressed);
  }

  .btn-icon:focus-visible {
    outline: 2px solid var(--palette-blue-300);
    outline-offset: 2px;
  }

  .btn-icon[aria-expanded="true"] {
    background-color: var(--surface-pressed);
  }

  /* ----- Estado de carregamento ----- */

  .btn[data-loading="true"] {
    position: relative;
    color: transparent !important;
    pointer-events: none;
  }

  .btn[data-loading="true"] > * {
    visibility: hidden;
  }

  .btn[data-loading="true"]::after {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    inline-size: 1.125rem;
    block-size: 1.125rem;
    margin-block-start: -0.5625rem;
    margin-inline-start: -0.5625rem;
    border: 2px solid currentcolor;
    border-radius: var(--radius-circle);
    border-block-start-color: transparent;
    color: var(--text-on-accent);
    animation: btn-spin 720ms linear infinite;
  }

  .btn--secondary[data-loading="true"]::after,
  .btn--ghost[data-loading="true"]::after {
    color: var(--text-strong);
  }

  .btn--inverse[data-loading="true"]::after {
    color: var(--text-on-inverse);
  }

  @keyframes btn-spin {
    to { transform: rotate(360deg); }
  }

  /* Botão flutuante da ação principal (lista de grupos) */
  .btn--floating {
    position: fixed;
    inset-block-end: calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
    inset-inline-end: var(--space-5);
    z-index: var(--z-sticky);
    box-shadow: var(--shadow-3);
  }
}