.button { display: flex; justify-content: center; align-items: center; font-size: var(--font-size-normal); background: var(--gray100); padding: 8px 16px; border-radius: 4px; border: 0; outline: none; cursor: pointer; white-space: nowrap; } .button:hover { background: #eaeaea; } .button + .button { margin-left: 10px; } .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) !important; background: var(--gray900) !important; } .action:hover { background: var(--gray800) !important; } .danger { color: var(--gray50) !important; background: var(--red500) !important; } .danger:hover { background: var(--red400) !important; }