@layer components {
  .gv2-button {
    display: inline-flex;
    min-block-size: var(--gv2-control-min-height);
    max-inline-size: 100%;
    padding: var(--gv2-space-2) var(--gv2-space-4);
    border: 0.0625rem solid transparent;
    border-radius: var(--gv2-radius-md);
    align-items: center;
    justify-content: center;
    gap: var(--gv2-space-2);
    background: var(--gv2-color-brand);
    color: #ffffff;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--gv2-transition), border-color var(--gv2-transition), color var(--gv2-transition);
  }

  .gv2-button:hover {
    background: var(--gv2-color-brand-hover);
  }

  .gv2-button--secondary {
    border-color: var(--gv2-color-line-strong);
    background: var(--gv2-color-surface);
    color: var(--gv2-color-ink);
  }

  .gv2-button--secondary:hover {
    border-color: var(--gv2-color-ink-muted);
    background: var(--gv2-color-surface-soft);
  }

  .gv2-button--danger {
    border-color: color-mix(in srgb, var(--gv2-color-negative) 30%, white);
    background: color-mix(in srgb, var(--gv2-color-negative) 8%, white);
    color: var(--gv2-color-negative);
  }

  .gv2-button[disabled],
  .gv2-button[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.55;
  }
}