.icon-button{border:var(--border-width-1) solid transparent;cursor:pointer;flex-shrink:0;justify-content:center;align-items:center;transition:background-color .2s ease-in,border-color .2s ease-in,color .2s ease-in,box-shadow .2s ease-in;display:inline-flex}.icon-button:focus-visible{outline:2px solid var(--surface-brand);outline-offset:2px}.icon-button:disabled{cursor:not-allowed;pointer-events:none}.icon-button--static{cursor:default}.icon-button--sm{border-radius:var(--radius-button-icon-compact);width:24px;height:24px;padding:3px}.icon-button--md{border-radius:var(--radius-button-icon);width:32px;height:32px;padding:7px}.icon-button--lg{border-radius:var(--radius-button-icon);width:40px;height:40px;padding:7px}.icon-button--base{background-color:var(--surface-action-secondary-base-default);border-color:var(--border-action-secondary-base-default);color:var(--icon-action-secondary-base-default)}.icon-button--base:hover:not(:disabled):not(.icon-button--active):not(.icon-button--static){background-color:var(--surface-action-secondary-base-hover);color:var(--icon-action-secondary-base-hover);box-shadow:0 0 0 3px var(--border-action-secondary-base-hover);border-color:#0000}.icon-button--base:active:not(:disabled):not(.icon-button--active):not(.icon-button--static){background-color:var(--surface-action-secondary-base-pressed);color:var(--icon-action-secondary-base-pressed);box-shadow:none;border-color:#0000}.icon-button--base.icon-button--active{background-color:var(--surface-action-secondary-base-active);color:var(--icon-action-secondary-base-active);border-color:var(--border-action-secondary-base-active);box-shadow:0 0 0 3px var(--border-action-icon-button-base-ring-active)}.icon-button--base:disabled{color:var(--icon-action-disabled)}.icon-button--subtle{background-color:var(--surface-action-secondary-subtle-default);color:var(--icon-action-secondary-subtle-default);border-color:#0000}.icon-button--subtle:hover:not(:disabled):not(.icon-button--active):not(.icon-button--static){background-color:var(--surface-action-secondary-subtle-hover);color:var(--icon-action-secondary-subtle-hover);box-shadow:0 0 0 3px var(--border-action-secondary-subtle-hover)}.icon-button--subtle:active:not(:disabled):not(.icon-button--active):not(.icon-button--static){background-color:var(--surface-action-secondary-subtle-pressed);color:var(--icon-action-secondary-subtle-pressed);box-shadow:none}.icon-button--subtle.icon-button--active{background-color:var(--surface-action-secondary-subtle-active);color:var(--icon-action-secondary-subtle-active);border-color:var(--border-action-secondary-subtle-active);box-shadow:0 0 0 3px var(--border-action-secondary-subtle-ring-active)}.icon-button--subtle.icon-button--static{background-color:var(--surface-blush);border-color:var(--border-action-secondary-subtle-static)}.icon-button--subtle:disabled{background-color:var(--surface-action-secondary-subtle-disabled);color:var(--icon-action-disabled)}.icon-button--muted{background-color:var(--surface-action-secondary-muted-default);color:var(--icon-action-secondary-muted-default);border-color:#0000}.icon-button--muted:hover:not(:disabled):not(.icon-button--active):not(.icon-button--static){background-color:var(--surface-action-secondary-muted-hover);color:var(--icon-action-secondary-muted-hover);box-shadow:0 0 0 3px var(--border-action-secondary-muted-hover)}.icon-button--muted:active:not(:disabled):not(.icon-button--active):not(.icon-button--static){background-color:var(--surface-action-secondary-muted-pressed);color:var(--icon-action-secondary-muted-pressed);box-shadow:none}.icon-button--muted.icon-button--active{background-color:var(--surface-action-secondary-muted-active);color:var(--icon-action-secondary-muted-active);border-color:var(--border-action-secondary-muted-active);box-shadow:0 0 0 3px var(--border-action-secondary-muted-ring-active)}.icon-button--muted.icon-button--static{background-color:var(--surface-action-secondary-base-default);border-color:var(--border-action-secondary-base-default)}.icon-button--muted:disabled{color:var(--icon-action-disabled)}.icon-button--on-brand{background-color:var(--surface-action-secondary-on-brand-default);color:var(--icon-action-secondary-on-brand-default);border-color:#0000}.icon-button--on-brand:hover:not(:disabled):not(.icon-button--active):not(.icon-button--static){background-color:var(--surface-action-secondary-on-brand-hover);color:var(--icon-action-secondary-on-brand-hover);box-shadow:0 0 0 3px var(--border-action-secondary-on-brand-hover)}.icon-button--on-brand:active:not(:disabled):not(.icon-button--active):not(.icon-button--static){background-color:var(--surface-action-secondary-on-brand-pressed);color:var(--icon-action-secondary-on-brand-pressed);box-shadow:none}.icon-button--on-brand.icon-button--active{background-color:var(--surface-action-secondary-on-brand-active);color:var(--icon-action-secondary-on-brand-active);border-color:var(--border-action-secondary-on-brand-active);box-shadow:0 0 0 3px var(--border-action-secondary-on-brand-ring-active)}.icon-button--on-brand.icon-button--static{background-color:#0000}.icon-button--on-brand:disabled{color:var(--icon-action-secondary-on-brand-disabled)}.icon-button--on-inverse{background-color:var(--surface-action-secondary-on-inverse-default);color:var(--icon-action-secondary-on-inverse-default);border-color:#0000}.icon-button--on-inverse:hover:not(:disabled):not(.icon-button--active):not(.icon-button--static){background-color:var(--surface-action-secondary-on-inverse-hover);color:var(--icon-action-secondary-on-inverse-hover);box-shadow:0 0 0 3px var(--border-action-secondary-on-inverse-hover)}.icon-button--on-inverse:active:not(:disabled):not(.icon-button--active):not(.icon-button--static){background-color:var(--surface-action-secondary-on-inverse-pressed);color:var(--icon-action-secondary-on-inverse-pressed);box-shadow:none}.icon-button--on-inverse.icon-button--active{background-color:var(--surface-action-secondary-on-inverse-active);color:var(--icon-action-secondary-on-inverse-active);border-color:var(--border-action-secondary-on-inverse-active);box-shadow:0 0 0 3px var(--border-action-secondary-on-inverse-ring-active)}.icon-button--on-inverse.icon-button--static{background-color:#0000}.icon-button--on-inverse:disabled{color:var(--icon-action-secondary-on-inverse-disabled)}.icon-button--on-surface{background-color:var(--surface-action-secondary-on-surface-default);border-color:var(--border-action-secondary-on-surface-default);color:var(--icon-action-secondary-on-surface-default)}.icon-button--on-surface:hover:not(:disabled):not(.icon-button--active):not(.icon-button--static){background-color:var(--surface-action-icon-button-on-surface-hover);color:var(--icon-action-secondary-on-surface-hover);box-shadow:0 0 0 3px var(--border-action-secondary-on-surface-ring-hover);border-color:#0000}.icon-button--on-surface:active:not(:disabled):not(.icon-button--active):not(.icon-button--static){background-color:var(--surface-action-secondary-on-surface-pressed);color:var(--icon-action-secondary-on-surface-default);box-shadow:none;border-color:#0000}.icon-button--on-surface.icon-button--active{background-color:var(--surface-action-secondary-on-surface-active);color:var(--icon-action-secondary-on-surface-active);border-color:var(--border-action-secondary-on-surface-active);box-shadow:0 0 0 3px var(--border-action-secondary-on-surface-ring-active)}.icon-button--on-surface.icon-button--static{background-color:var(--surface-action-secondary-base-default);border-color:var(--border-action-secondary-base-default)}.icon-button--on-surface:disabled{background-color:var(--surface-action-secondary-on-surface-disabled);color:var(--icon-action-secondary-on-surface-disabled)}.icon-button--primary{background-color:var(--surface-action-primary-default);color:var(--icon-button-primary-default);border-color:#0000}.icon-button--primary:hover:not(:disabled):not(.icon-button--active):not(.icon-button--static){background-color:var(--surface-action-primary-hover);color:var(--icon-button-primary-hover);box-shadow:0 0 0 3px var(--border-action-primary-ring-hover)}.icon-button--primary:active:not(:disabled):not(.icon-button--active):not(.icon-button--static){background-color:var(--surface-action-primary-pressed);color:var(--icon-button-primary-pressed);box-shadow:none}.icon-button--primary.icon-button--active{background-color:var(--surface-action-primary-active);color:var(--icon-button-primary-active);box-shadow:0 0 0 3px var(--border-action-primary-ring-active)}.icon-button--primary:disabled{background-color:var(--surface-action-primary-disabled)}.icon-button--on-tinted{background-color:var(--surface-action-icon-button-on-tinted-default);color:var(--icon-action-secondary-subtle-default);border-color:#0000}.icon-button--on-tinted:hover:not(:disabled):not(.icon-button--active):not(.icon-button--static){background-color:var(--surface-action-icon-button-on-tinted-hover);color:var(--icon-action-secondary-subtle-hover);box-shadow:0 0 0 3px var(--border-action-secondary-subtle-hover)}.icon-button--on-tinted:active:not(:disabled):not(.icon-button--active):not(.icon-button--static){background-color:var(--surface-action-icon-button-on-tinted-pressed);color:var(--icon-action-secondary-subtle-pressed);box-shadow:none}.icon-button--on-tinted.icon-button--active{background-color:var(--surface-action-secondary-subtle-active);color:var(--icon-action-secondary-subtle-active);border-color:var(--border-action-secondary-subtle-active);box-shadow:0 0 0 3px var(--border-action-secondary-subtle-ring-active)}.icon-button--on-tinted:disabled{background-color:var(--surface-action-secondary-subtle-disabled);background-image:linear-gradient(var(--surface-action-icon-button-on-tinted-default), var(--surface-action-icon-button-on-tinted-default));color:var(--icon-action-disabled)}