@layer components {
  .btn,
  :where(button, input[type="submit"], input[type="reset"]) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    padding: var(--space-2) var(--space-3);
    color: var(--text-primary);
    background: var(--bg-primary);
    border: 0.5px solid var(--border-strong);
    border-radius: var(--radius-md);
    cursor: pointer;
    text-decoration: none;
    transition: background var(--speed-fast) var(--ease-out),
                border-color var(--speed-fast) var(--ease-out),
                opacity var(--speed-fast) var(--ease-out),
                transform var(--speed-fast) var(--ease-out);
  }

  .btn:hover:where(:not(:disabled)),
  :where(button, input[type="submit"], input[type="reset"]):hover:where(:not(:disabled)) { background: var(--bg-tertiary); text-decoration: none; }

  .btn:active:where(:not(:disabled)),
  :where(button, input[type="submit"], input[type="reset"]):active:where(:not(:disabled)) { transform: scale(0.97); }

  .btn:disabled,
  :where(button, input[type="submit"], input[type="reset"]):disabled { opacity: 0.45; cursor: not-allowed; }

  .btn-primary {
    background: var(--text-primary);
    color: var(--bg-primary);
    border-color: var(--text-primary);
  }
  .btn-primary:hover { background: var(--text-primary); opacity: 0.9; }
  .btn-primary::selection,
  .btn-primary ::selection { background: var(--bg-tertiary); color: var(--text-primary); }

  .btn-danger {
    color: var(--danger-text);
    border-color: var(--danger-border);
    background: var(--bg-primary);
  }
  .btn-danger:hover { background: var(--danger-bg); }

  .btn-small { font-size: 11px; padding: var(--space-1) var(--space-2); }

  form.button_to { display: inline-block; }

  .segmented {
    display: inline-flex;
    gap: 2px;
    padding: 2px;
    background: var(--bg-primary);
    border: 0.5px solid var(--border);
    border-radius: var(--radius-md);
  }
  .segmented-opt {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.2;
    white-space: nowrap;
    padding: 5px 10px;
    border: none;
    background: none;
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
  }
  .segmented-opt:hover { background: none; color: var(--text-primary); text-decoration: none; }
  .segmented-opt[aria-pressed="true"],
  .segmented-opt[aria-current] {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    font-weight: 500;
    box-shadow: 0 0 0 0.5px var(--border);
  }
}