.button { display: flex; justify-content: center; align-items: center; font-size: var(--font-size-normal); color: var(--gray900); background: var(--gray100); padding: 8px 16px; border-radius: 4px; border: 0; outline: none; cursor: pointer; white-space: nowrap; position: relative; } .button:hover { background: var(--gray200); } .button:active { color: var(--gray700); } .large { font-size: var(--font-size-large); } .medium { font-size: var(--font-size-normal); } .small { font-size: var(--font-size-small); } .xsmall { font-size: var(--font-size-xsmall); } .action { color: var(--gray50); background: var(--gray900); } .action:hover { background: var(--gray800); } .danger { color: var(--gray50); background: var(--red500); } .danger:hover { background: var(--red400); } .light { background: var(--gray50); } .light:hover { background: var(--gray75); } .button:disabled { cursor: default; color: var(--gray500); background: var(--gray75); } .button:disabled:active { color: var(--gray500); } .button:disabled:hover { background: var(--gray75); } .button.light:disabled { background: var(--gray50); }