button.new-button,.button.new-button{padding:var(--p-sm) var(--p-md);border:none;border-radius:var(--rounded-full);background-color:var(--primary-color);color:var(--default-text-inv);cursor:pointer;gap:.3rem;transition:all .2s;display:inline-flex;justify-content:center;align-items:center;&:hover{background-color:var(--primary-hover-color)}&:active{transform:scale(.95)}&.secondary{background-color:var(--secondary-color);color:var(--default-text);&:hover{background-color:var(--secondary-hover-color)}}&.wireframe{background-color:var(--bg-color);color:var(--default-text);border:1px solid var(--default-text);&:hover{background-color:var(--minor-text)}}&.destructive{background-color:var(--destructive-color);color:var(--default-text);&:hover{background-color:var(--destructive-color-hover)}}&.success{background-color:var(--success-color);color:var(--default-text);&:hover{background-color:var(--success-color-hover)}}&.small-button{padding:.25rem .75rem;font-size:.875rem}}.badge{display:inline-block;padding:var(--p-xs) var(--p-sm);font-size:.75rem;color:#fff;background-color:var(--primary-color);border-radius:var(--rounded-full);transition:all .2s;cursor:default;color:var(--default-text);&.success{background-color:var(--success-color)}}.badge.secondary{background-color:var(--secondary-color);color:var(--default-text)}.badge.wireframe{background-color:var(--bg-color);color:var(--default-text);border:1px solid var(--default-text)}.badge.destructive{background-color:var(--destructive-color);color:var(--default-text)}button,badge{& svg{width:1rem}}