.icon-button{--shadow: var(--button-box-shadow, none);--size: 40px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;outline:none;width:var(--size);height:var(--size);cursor:pointer;color:var(--foreground, inherit);background:var(--background, transparent);border:var(--border, none);border-radius:var(--border-radius, 0);box-shadow:var(--shadow, none);transition:color 100ms ease-in-out,background-color 100ms ease-in-out,border-color 100ms ease-in-out,box-shadow 100ms ease-in-out;transform:translateZ(0)}.icon-button span{display:flex;color:var(--foreground);width:var(--icon-size);height:var(--icon-size)}.icon-button span svg{color:var(--foreground);width:var(--icon-size);height:var(--icon-size)}.icon-button.solid.brand{--background: var(--button-brand-solid-background, transparent);--foreground: var(--button-brand-solid-color, inherit);--border: var(--button-brand-solid-border, none);--shadow: var(--button-brand-solid-box-shadow, none)}.icon-button.solid.brand:hover,.icon-button.solid.brand.active{--background: var(--button-brand-solid-background-hover, transparent);--foreground: var(--button-brand-solid-color-hover, inherit);--border: var(--button-brand-solid-border-hover, none);--shadow: var(--button-brand-solid-box-shadow-hover, none)}.icon-button.solid.bw{--background: var(--button-bw-solid-background, transparent);--foreground: var(--button-bw-solid-color, inherit);--border: var(--button-bw-solid-border, none);--shadow: var(--button-bw-solid-box-shadow, none)}.icon-button.solid.bw:hover,.icon-button.solid.bw.active{--background: var(--button-bw-solid-background-hover, transparent);--foreground: var(--button-bw-solid-color-hover, inherit);--border: var(--button-bw-solid-border-hover, none);--shadow: var(--button-bw-solid-box-shadow-hover, none)}.icon-button.solid.inverse{--background: var(--button-inverse-solid-background, transparent);--foreground: var(--button-inverse-solid-color, inherit);--border: var(--button-inverse-solid-border, none);--shadow: var(--button-inverse-solid-box-shadow, none)}.icon-button.solid.inverse:hover,.icon-button.solid.inverse.active{--background: var(--button-inverse-solid-background-hover, transparent);--foreground: var(--button-inverse-solid-color-hover, inherit);--border: var(--button-inverse-solid-border-hover, none);--shadow: var(--button-inverse-solid-box-shadow-hover, none)}.icon-button.solid[disabled],.icon-button.solid[disabled]:hover,.icon-button.solid[aria-disabled=true],.icon-button.solid[aria-disabled=true]:hover,.icon-button.solid:disabled,.icon-button.solid:disabled:hover{--background: var(--button-disabled-solid-background, transparent);--foreground: var(--button-disabled-solid-color, inherit);--border: var(--button-disabled-solid-border, none);--shadow: var(--button-disabled-solid-box-shadow, none)}.icon-button.outline.brand{--background: var(--button-brand-outline-background, transparent);--foreground: var(--button-brand-outline-color, inherit);--border: var(--button-brand-outline-border, none);--shadow: var(--button-brand-outline-box-shadow, none)}.icon-button.outline.brand:hover,.icon-button.outline.brand.active{--background: var(--button-brand-outline-background-hover, transparent);--foreground: var(--button-brand-outline-color-hover, inherit);--border: var(--button-brand-outline-border-hover, none);--shadow: var(--button-brand-outline-box-shadow-hover, none)}.icon-button.outline.bw{--background: var(--button-bw-outline-background, transparent);--foreground: var(--button-bw-outline-color, inherit);--border: var(--button-bw-outline-border, none);--shadow: var(--button-bw-outline-box-shadow, none)}.icon-button.outline.bw:hover,.icon-button.outline.bw.active{--background: var(--button-bw-outline-background-hover, transparent);--foreground: var(--button-bw-outline-color-hover, inherit);--border: var(--button-bw-outline-border-hover, none);--shadow: var(--button-bw-outline-box-shadow-hover, none)}.icon-button.outline.inverse{--background: var(--button-inverse-outline-background, transparent);--foreground: var(--button-inverse-outline-color, inherit);--border: var(--button-inverse-outline-border, none);--shadow: var(--button-inverse-outline-box-shadow, none)}.icon-button.outline.inverse:hover,.icon-button.outline.inverse.active{--background: var(--button-inverse-outline-background-hover, transparent);--foreground: var(--button-inverse-outline-color-hover, inherit);--border: var(--button-inverse-outline-border-hover, none);--shadow: var(--button-inverse-outline-box-shadow-hover, none)}.icon-button.outline[disabled],.icon-button.outline[disabled]:hover,.icon-button.outline[aria-disabled=true],.icon-button.outline[aria-disabled=true]:hover,.icon-button.outline:disabled,.icon-button.outline:disabled:hover{--background: var(--button-disabled-outline-background, transparent);--foreground: var(--button-disabled-outline-color, inherit);--border: var(--button-disabled-outline-border, none);--shadow: var(--button-disabled-outline-box-shadow, none)}.icon-button.ghost.brand{--background: var(--button-brand-ghost-background, transparent);--foreground: var(--button-brand-ghost-color, inherit);--border: var(--button-brand-ghost-border, none);--shadow: var(--button-brand-ghost-box-shadow, none)}.icon-button.ghost.brand:hover,.icon-button.ghost.brand.active{--background: var(--button-brand-ghost-background-hover, transparent);--foreground: var(--button-brand-ghost-color-hover, inherit);--border: var(--button-brand-ghost-border-hover, none);--shadow: var(--button-brand-ghost-box-shadow-hover, none)}.icon-button.ghost.bw{--background: var(--button-bw-ghost-background, transparent);--foreground: var(--button-bw-ghost-color, inherit);--border: var(--button-bw-ghost-border, none);--shadow: var(--button-bw-ghost-box-shadow, none)}.icon-button.ghost.bw:hover,.icon-button.ghost.bw.active{--background: var(--button-bw-ghost-background-hover, transparent);--foreground: var(--button-bw-ghost-color-hover, inherit);--border: var(--button-bw-ghost-border-hover, none);--shadow: var(--button-bw-ghost-box-shadow-hover, none)}.icon-button.ghost.inverse{--background: var(--button-inverse-ghost-background, transparent);--foreground: var(--button-inverse-ghost-color, inherit);--border: var(--button-inverse-ghost-border, none);--shadow: var(--button-inverse-ghost-box-shadow, none)}.icon-button.ghost.inverse:hover,.icon-button.ghost.inverse.active{--background: var(--button-inverse-ghost-background-hover, transparent);--foreground: var(--button-inverse-ghost-color-hover, inherit);--border: var(--button-inverse-ghost-border-hover, none);--shadow: var(--button-inverse-ghost-box-shadow-hover, none)}.icon-button.ghost[disabled],.icon-button.ghost[disabled]:hover,.icon-button.ghost[aria-disabled=true],.icon-button.ghost[aria-disabled=true]:hover,.icon-button.ghost:disabled,.icon-button.ghost:disabled:hover{--background: var(--button-disabled-ghost-background, transparent);--foreground: var(--button-disabled-ghost-color, inherit);--border: var(--button-disabled-ghost-border, none);--shadow: var(--button-disabled-ghost-box-shadow, none)}.icon-button.small{--button-small-border-radius:clamp(var(--button-small-border-radius-min)*1px,(var(--button-small-border-radius-max) - var(--button-small-border-radius-min))/(var(--viewport-max) - var(--viewport-min))*100vw + (var(--button-small-border-radius-min) - (var(--button-small-border-radius-max) - var(--button-small-border-radius-min))*var(--viewport-min)/(var(--viewport-max) - var(--viewport-min)))*1px,var(--button-small-border-radius-max)*1px);--border-radius: var(--button-small-border-radius);--size:clamp(var(--button-small-height-min)*1px,(var(--button-small-height-max) - var(--button-small-height-min))/(var(--viewport-max) - var(--viewport-min))*100vw + (var(--button-small-height-min) - (var(--button-small-height-max) - var(--button-small-height-min))*var(--viewport-min)/(var(--viewport-max) - var(--viewport-min)))*1px,var(--button-small-height-max)*1px)}.icon-button.small svg{--button-small-icon-size:clamp(var(--button-small-icon-size-min)*1px,(var(--button-small-icon-size-max) - var(--button-small-icon-size-min))/(var(--viewport-max) - var(--viewport-min))*100vw + (var(--button-small-icon-size-min) - (var(--button-small-icon-size-max) - var(--button-small-icon-size-min))*var(--viewport-min)/(var(--viewport-max) - var(--viewport-min)))*1px,var(--button-small-icon-size-max)*1px);--icon-size: var(--button-small-icon-size, 20px)}.icon-button.medium{--button-medium-border-radius:clamp(var(--button-medium-border-radius-min)*1px,(var(--button-medium-border-radius-max) - var(--button-medium-border-radius-min))/(var(--viewport-max) - var(--viewport-min))*100vw + (var(--button-medium-border-radius-min) - (var(--button-medium-border-radius-max) - var(--button-medium-border-radius-min))*var(--viewport-min)/(var(--viewport-max) - var(--viewport-min)))*1px,var(--button-medium-border-radius-max)*1px);--border-radius: var(--button-medium-border-radius);--size:clamp(var(--button-medium-height-min)*1px,(var(--button-medium-height-max) - var(--button-medium-height-min))/(var(--viewport-max) - var(--viewport-min))*100vw + (var(--button-medium-height-min) - (var(--button-medium-height-max) - var(--button-medium-height-min))*var(--viewport-min)/(var(--viewport-max) - var(--viewport-min)))*1px,var(--button-medium-height-max)*1px)}.icon-button.medium svg{--button-medium-icon-size:clamp(var(--button-medium-icon-size-min)*1px,(var(--button-medium-icon-size-max) - var(--button-medium-icon-size-min))/(var(--viewport-max) - var(--viewport-min))*100vw + (var(--button-medium-icon-size-min) - (var(--button-medium-icon-size-max) - var(--button-medium-icon-size-min))*var(--viewport-min)/(var(--viewport-max) - var(--viewport-min)))*1px,var(--button-medium-icon-size-max)*1px);--icon-size: var(--button-medium-icon-size, 20px)}.icon-button.large{--button-large-border-radius:clamp(var(--button-large-border-radius-min)*1px,(var(--button-large-border-radius-max) - var(--button-large-border-radius-min))/(var(--viewport-max) - var(--viewport-min))*100vw + (var(--button-large-border-radius-min) - (var(--button-large-border-radius-max) - var(--button-large-border-radius-min))*var(--viewport-min)/(var(--viewport-max) - var(--viewport-min)))*1px,var(--button-large-border-radius-max)*1px);--border-radius: var(--button-large-border-radius);--size:clamp(var(--button-large-height-min)*1px,(var(--button-large-height-max) - var(--button-large-height-min))/(var(--viewport-max) - var(--viewport-min))*100vw + (var(--button-large-height-min) - (var(--button-large-height-max) - var(--button-large-height-min))*var(--viewport-min)/(var(--viewport-max) - var(--viewport-min)))*1px,var(--button-large-height-max)*1px)}.icon-button.large svg{--button-large-icon-size:clamp(var(--button-large-icon-size-min)*1px,(var(--button-large-icon-size-max) - var(--button-large-icon-size-min))/(var(--viewport-max) - var(--viewport-min))*100vw + (var(--button-large-icon-size-min) - (var(--button-large-icon-size-max) - var(--button-large-icon-size-min))*var(--viewport-min)/(var(--viewport-max) - var(--viewport-min)))*1px,var(--button-large-icon-size-max)*1px);--icon-size: var(--button-large-icon-size, 24px)}.icon-button:focus-visible{box-shadow:var(--focus-ring-shadow) !important}.icon-button[disabled],.icon-button[aria-disabled=true],.icon-button:disabled{cursor:not-allowed}