.ui-button-icon{position:relative;transition:all .3s;cursor:pointer;border:none;display:flex;align-items:center;justify-content:center}.ui-button-icon--system{background:var(--variant-system-default);color:var(--variant-system-on-default)}.ui-button-icon--system:hover{background:var(--variant-system-hover)}.ui-button-icon--system:active{background:var(--variant-system-active)}.ui-button-icon--neutral{background:var(--variant-neutral-default);color:var(--variant-neutral-on-default)}.ui-button-icon--neutral:hover{background:var(--variant-neutral-hover)}.ui-button-icon--neutral:active{background:var(--variant-neutral-active)}.ui-button-icon--accent-primary{background:var(--variant-accent-primary-default);color:var(--variant-accent-primary-on-default)}.ui-button-icon--accent-primary:hover{background:var(--variant-accent-primary-hover)}.ui-button-icon--accent-primary:active{background:var(--variant-accent-primary-active)}.ui-button-icon--accent-secondary{background:var(--variant-accent-secondary-default);color:var(--variant-accent-secondary-on-default)}.ui-button-icon--accent-secondary:hover{background:var(--variant-accent-secondary-hover)}.ui-button-icon--accent-secondary:active{background:var(--variant-accent-secondary-active)}.ui-button-icon--positive{background:var(--variant-positive-default);color:var(--variant-positive-on-default)}.ui-button-icon--positive:hover{background:var(--variant-positive-hover)}.ui-button-icon--positive:active{background:var(--variant-positive-active)}.ui-button-icon--negative{background:var(--variant-negative-default);color:var(--variant-negative-on-default)}.ui-button-icon--negative:hover{background:var(--variant-negative-hover)}.ui-button-icon--negative:active{background:var(--variant-negative-active)}.ui-button-icon--warning{background:var(--variant-warning-default);color:var(--variant-warning-on-default)}.ui-button-icon--warning:hover{background:var(--variant-warning-hover)}.ui-button-icon--warning:active{background:var(--variant-warning-active)}.ui-button-icon--info{background:var(--variant-info-default);color:var(--variant-info-on-default)}.ui-button-icon--info:hover{background:var(--variant-info-hover)}.ui-button-icon--info:active{background:var(--variant-info-active)}.ui-button-icon--utility{background:var(--variant-utility-default);color:var(--variant-utility-on-default)}.ui-button-icon--utility:hover{background:var(--variant-utility-hover)}.ui-button-icon--utility:active{background:var(--variant-utility-active)}.ui-button-icon--skeleton{background:var(--surface-skeleton);color:transparent;pointer-events:none}.ui-button-icon--ghost{background:transparent;color:#f5f9ff}.ui-button-icon--ghost:hover{background:var(--variant-system-hover)}.ui-button-icon--ghost:active{background:var(--variant-system-active)}.ui-button-icon:disabled{pointer-events:none;background-color:var(--bg-disabled);color:var(--fg-disabled);cursor:default}.ui-button-icon--s{padding:var(--component-padding-x6, 6px);border-radius:var(--component-radius-x6, 6px)}.ui-button-icon--m{padding:var(--component-padding-x8, 8px);border-radius:var(--component-radius-x8, 8px)}.ui-button-icon--l,.ui-button-icon--xl{padding:var(--component-padding-x12, 12px);border-radius:var(--component-radius-x12, 12px)}.ui-button-icon--s .ui-button-icon__icon,.ui-button-icon--m .ui-button-icon__icon,.ui-button-icon--l .ui-button-icon__icon,.ui-button-icon--xl .ui-button-icon__icon{width:24px;height:24px}.ui-button-icon__content{width:1em;height:1em;display:flex;align-items:center;justify-content:center}.ui-button-icon__icon{width:100%;height:100%;display:inline-flex;align-items:center;justify-content:center}.ui-button-icon__icon svg{width:100%;height:100%}.ui-button-icon--x6{height:var(--component-size-x6);width:var(--component-size-x6);padding:var(--component-padding-x6);border-radius:var(--component-radius-x6)}.ui-button-icon--x8{height:var(--component-size-x8);width:var(--component-size-x8);padding:var(--component-padding-x8);border-radius:var(--component-radius-x8)}.ui-button-icon--x9{height:var(--component-size-x9);width:var(--component-size-x9);padding:var(--component-padding-x9);border-radius:var(--component-radius-x9)}.ui-button-icon--x12{height:var(--component-size-x12);width:var(--component-size-x12);padding:var(--component-padding-x12);border-radius:var(--component-radius-x12)}.ui-button-icon--x14{height:var(--component-size-x14);width:var(--component-size-x14);padding:var(--component-padding-x14);border-radius:var(--component-radius-x14)}.ui-button-icon--x16{height:var(--component-size-x16);width:var(--component-size-x16);padding:var(--component-padding-x16);border-radius:var(--component-radius-x16)}.ui-button-icon--x20{height:var(--component-size-x20);width:var(--component-size-x20);padding:var(--component-padding-x20);border-radius:var(--component-radius-x20)}