@layer components {
  .hm-c-button {
    padding: var(--hm-space-sm) var(--hm-space-md);
    border: 1px solid transparent;
    border-radius: var(--hm-radius-md);
    background: var(--hm-color-primary);
    color: var(--hm-color-on-primary);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
  }

  .hm-c-button:disabled {
    opacity: 0.6;
    cursor: wait;
  }

  .hm-c-button.hm-m-secondary {
    border-color: var(--hm-color-border);
    background: transparent;
    color: var(--hm-color-text);
    font-weight: 400;
  }
}