.o-btn{padding:8px 12px;border-radius:3px;font-weight:400;font-size:14px;cursor:pointer;transition:background .1s;background:hsl(var(--o-btn-bg-hs) calc(var(--o-btn-bg-l) + var(--o-btn-interaction, 0%)));color:var(--o-btn-color)}.o-btn:hover{--o-btn-interaction: var(--lightness-interaction-hover)}.o-btn:disabled{--o-btn-interaction: var(--lightness-interaction-disabled);cursor:not-allowed}.o-btn:active:not(:disabled){--o-btn-interaction: var(--lightness-interaction-active)}.o-btn--icon .o-btn_icon{margin-right:8px}.o-btn--loading .o-btn_icon{animation:rotate-center 2s infinite linear}.o-btn--primary{--o-btn-bg-hs: var(--color-surface-brand-hs);--o-btn-bg-l: var(--color-surface-brand-l);--o-btn-color: var(--color-text-reversed)}.o-btn--secondary{--o-btn-bg-hs: var(--color-surface-tertiary-hs);--o-btn-bg-l: var(--color-surface-tertiary-l);--o-btn-color: var(--color-text-primary)}.o-btn--reversed{--o-btn-bg-hs: var(--color-surface-reversed-hs);--o-btn-bg-l: var(--color-surface-reversed-l);--o-btn-color: var(--color-text-reversed)}.o-btn--danger{--o-btn-bg-hs: var(--color-surface-danger-bold-hs);--o-btn-bg-l: var(--color-surface-danger-bold-l);--o-btn-color: var(--color-text-reversed)}