.icon-button{--icon-size: 1rem;--icon-color: currentcolor;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:2.5rem;height:2.5rem;padding:0;color:var(--ds-color-white);cursor:pointer;background-color:var(--ds-color-primary-700);border:var(--borderWidth) solid transparent;border-radius:var(--rounded-ml);box-shadow:var(--boxShadow1);transition:background-color .2s ease-out,border-color .2s ease-out,box-shadow .2s ease-out}.icon-button:where(:hover,.icon-button--hover){background-color:var(--ds-color-primary-500)}.icon-button:where(:focus-visible,.icon-button--focus){background-color:var(--ds-color-primary-500);border-color:var(--ds-color-primary-900);border-width:2px;box-shadow:0 0 0 3px var(--ds-color-white);outline:none}.icon-button:where(:active,.icon-button--pressed){background-color:var(--ds-color-primary-800);box-shadow:var(--boxShadowInset)}.icon-button--outlined{color:var(--ds-color-primary-700);background-color:var(--ds-color-white);border-color:var(--ds-color-primary-100)}.icon-button--outlined:where(:hover,.icon-button--hover){background-color:var(--ds-color-primary-200);border-color:var(--ds-color-primary-300-alpha-50)}.icon-button--outlined:where(:focus-visible,.icon-button--focus){color:var(--ds-color-primary-500);background-color:var(--ds-color-white);border-color:var(--ds-color-primary-900);box-shadow:var(--boxShadow1)}.icon-button--outlined:where(:active,.icon-button--pressed){color:var(--ds-color-primary-600);background-color:var(--ds-color-primary-300);border-color:var(--ds-color-primary-600);box-shadow:var(--boxShadowInset)}.icon-button--ghost{color:var(--ds-color-primary-700);background-color:transparent;box-shadow:none}.icon-button--ghost:where(:hover,.icon-button--hover){background-color:var(--ds-color-primary-200-alpha-50)}.icon-button--ghost:where(:focus-visible,.icon-button--focus){color:var(--ds-color-primary-500);background-color:var(--ds-color-primary-50);border-color:var(--ds-color-primary-900);box-shadow:0 0 0 3px var(--ds-color-white)}.icon-button--ghost:where(:active,.icon-button--pressed){color:var(--ds-color-primary-600);background-color:var(--ds-color-primary-200);box-shadow:var(--boxShadowInset)}.icon-button:where(:disabled,.icon-button--disabled){color:color-mix(in srgb,var(--ds-color-primary-700) 50%,transparent);cursor:default;background-color:color-mix(in srgb,var(--ds-color-primary-50) 50%,var(--ds-color-grey-60));border-color:var(--ds-color-primary-100);box-shadow:none}.icon-button--outlined:where(:disabled,.icon-button--disabled){background-color:var(--ds-color-white);border-color:var(--ds-color-primary-100)}.icon-button--ghost:where(:disabled,.icon-button--disabled){background-color:transparent}.icon-button__icon{display:inline-flex}.icon-button__icon--pressed{display:none}.icon-button:where(:active,.icon-button--pressed,[aria-pressed=true]) .icon-button__icon--default{display:none}.icon-button:where(:active,.icon-button--pressed,[aria-pressed=true]) .icon-button__icon--pressed{display:inline-flex}@media(prefers-reduced-motion:reduce){.icon-button{transition:none}}