.io-btn-component{&[data-v-fbf1d6d7]{padding:var(--spacing-2) var(--spacing-4);cursor:pointer;background-color:#0000;border:1px solid #0000;border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;gap:8px;font-family:Inter,sans-serif;font-weight:500;line-height:1.25;transition:all .15s;display:inline-flex}&[disabled][data-v-fbf1d6d7]{cursor:not-allowed}&.io-btn-component--xsmall[data-v-fbf1d6d7]{height:24px;padding:var(--spacing-1) var(--spacing-4);font-size:10px}&.io-btn-component--small[data-v-fbf1d6d7]{height:32px;font-size:12px}&.io-btn-component--normal[data-v-fbf1d6d7]{height:40px;font-size:14px}&.io-btn-component--primary{&[data-v-fbf1d6d7]{background-color:var(--main);color:var(--color-foreground-inverse)}&[data-v-fbf1d6d7]:hover,&[data-v-fbf1d6d7]:focus,&[data-v-fbf1d6d7]:active{background-color:var(--color-surface-strong-2)}&[disabled][data-v-fbf1d6d7]{background-color:var(--darker-bg);color:var(--color-foreground-strong)}}&.io-btn-component--secondary{&[data-v-fbf1d6d7]{color:var(--color-foreground-secondary);border-color:var(--color-foreground-strong)}&[data-v-fbf1d6d7]:hover,&[data-v-fbf1d6d7]:focus,&[data-v-fbf1d6d7]:active{border-color:var(--color-foreground-secondary);color:var(--color-foreground-secondary)}&[disabled][data-v-fbf1d6d7]{color:var(--darker-bg);border-color:var(--color-foreground-strong)}}&.io-btn-component--link{&[data-v-fbf1d6d7]{height:auto;color:var(--color-foreground-success);padding:0}&[data-v-fbf1d6d7]:hover,&[data-v-fbf1d6d7]:focus{color:var(--color-foreground-success-strong)}&[data-v-fbf1d6d7]:active{color:var(--color-foreground-success)}&[disabled]{&[data-v-fbf1d6d7],& .io-btn-component__icon[data-v-fbf1d6d7]{color:var(--color-foreground-strong)}}}&.io-btn-component--link-bordered{&[data-v-fbf1d6d7]{height:auto;color:var(--color-foreground-success);border-color:var(--color-foreground-success);padding:8px 16px}&[data-v-fbf1d6d7]:hover,&[data-v-fbf1d6d7]:focus{color:var(--color-foreground-success-strong);border-color:var(--color-foreground-success-strong)}&[data-v-fbf1d6d7]:active{color:var(--color-foreground-success);border-color:var(--color-foreground-success)}&[disabled]{&[data-v-fbf1d6d7],& .io-btn-component__icon[data-v-fbf1d6d7]{color:var(--color-foreground-strong);border-color:var(--color-foreground-strong)}}}&.io-btn-component--no-action[data-v-fbf1d6d7]{height:auto;padding:0}&.io-btn-component--tonal{&[data-v-fbf1d6d7]{background-color:var(--color-background-strong);color:var(--color-foreground-secondary)}&[data-v-fbf1d6d7]:not([disabled]):hover{background-color:var(--color-foreground-border-default)}&[data-v-fbf1d6d7]:not([disabled]):active{background-color:var(--color-background-strong)}&[data-v-fbf1d6d7]:focus{box-shadow:0 0 0 2px var(--color-foreground-focus)}&[disabled]{&[data-v-fbf1d6d7],& .io-btn-component__icon[data-v-fbf1d6d7]{color:var(--color-foreground-strong)}}}&.io-btn-component--plain-icon{&[data-v-fbf1d6d7]{height:20px;padding:0;font-size:20px}&.io-btn-component--small[data-v-fbf1d6d7]{height:16px}}&.io-btn-component--ghost{&[data-v-fbf1d6d7]{color:var(--color-foreground-secondary)}&[data-v-fbf1d6d7]:not([disabled]):hover{background-color:var(--color-surface-muted)}&[data-v-fbf1d6d7]:not([disabled]):active{background-color:var(--color-background-strong)}&[data-v-fbf1d6d7]:focus{box-shadow:0 0 0 2px var(--color-foreground-focus)}&[disabled]{&[data-v-fbf1d6d7]{background-color:#0000}&[data-v-fbf1d6d7],& .io-btn-component__icon[data-v-fbf1d6d7]{color:var(--color-foreground-strong)}}}&.io-btn-component--primary:not(.io-btn-component--icon-only),&.io-btn-component--secondary:not(.io-btn-component--icon-only){& .io-btn-component__icon--left[data-v-fbf1d6d7]{margin-left:-8px}& .io-btn-component__icon--right[data-v-fbf1d6d7]{margin-right:-8px}}&.io-btn-component--color-success{&[data-v-fbf1d6d7],& .io-btn-component__icon[data-v-fbf1d6d7]{color:var(--color-foreground-success)}}&.io-btn-component--color-danger{&[data-v-fbf1d6d7],& .io-btn-component__icon[data-v-fbf1d6d7]{color:var(--color-foreground-danger)}}&.io-btn-component--color-warning{&[data-v-fbf1d6d7],& .io-btn-component__icon[data-v-fbf1d6d7]{color:var(--color-foreground-warning)}}&.io-btn-component--color-info{&[data-v-fbf1d6d7],& .io-btn-component__icon[data-v-fbf1d6d7]{color:var(--color-foreground-info)}}&.justify-start[data-v-fbf1d6d7]{justify-content:flex-start}&.justify-center[data-v-fbf1d6d7]{justify-content:center}&.justify-end[data-v-fbf1d6d7]{justify-content:flex-end}&.io-btn-component--icon-only{&[data-v-fbf1d6d7]{width:40px;padding:0;position:relative}&.io-btn-component--small[data-v-fbf1d6d7]{width:32px;height:32px}&.io-btn-component--xsmall[data-v-fbf1d6d7]{width:24px;height:24px}}& .icon-loader-2[data-v-fbf1d6d7]{animation:2s linear infinite spin-fbf1d6d7}& .io-btn-component__counter[data-v-fbf1d6d7]{background-color:var(--surfie-green-darker);width:16px;height:16px;color:var(--color-foreground-inverse);border-radius:4px;justify-content:center;align-items:center;display:flex;position:absolute;top:-3px;right:-3px}}.io-btn-component__icon.text-yellow[data-v-fbf1d6d7]{color:var(--primitive-yellow-300)}@keyframes spin-fbf1d6d7{0%{transform:rotate(0)}to{transform:rotate(1turn)}}