.button-base{display:flex;align-items:center;justify-content:center;gap:.2rem;cursor:pointer;padding:.625rem .9375rem;color:var(--text);font-weight:500;border-radius:5px;> svg { width: 1rem; height: 1rem; } &:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; } &.-primary { background-color: var(--primary); &:hover { background-color: var(--primary-surface); } } &.-secondary { border-width: 1px; border-color: var(--bg-dark); background-color: var(--bg-light); &:hover { background-color: var(--bg); } } &.-dangerous { border-width: 1px; border-color: var(--light-red); color: var(--red); &:hover { background-color: hsl(0 88.21% 97.32%); border-color: hsl(358.75 100% 69.56%); } } &.-muted { border-color: var(--bg-dark); background-color: white; border-width: 1px; color: var(--text-muted); &:hover { opacity: 75%; } }}