.ds-flipper{--flp-size:var(--flipper-size-m);--flp-icon:var(--flipper-icon-m);box-sizing:border-box;width:var(--flp-size);height:var(--flp-size);padding:var(--sp-0);border:var(--bw-0);border-radius:var(--flipper-radius);background:var(--c-flipper-bg);color:var(--c-flipper-icon);box-shadow:var(--sh-flipper);font:inherit;cursor:pointer;transition:background var(--t-control) var(--ease), box-shadow var(--t-control) var(--ease);flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.ds-flipper.xs{--flp-size:var(--flipper-size-xs);--flp-icon:var(--flipper-icon-xs)}.ds-flipper.s{--flp-size:var(--flipper-size-s);--flp-icon:var(--flipper-icon-s)}.ds-flipper.l{--flp-size:var(--flipper-size-l);--flp-icon:var(--flipper-icon-l)}.ds-flipper.xl{--flp-size:var(--flipper-size-xl);--flp-icon:var(--flipper-icon-xl)}.ds-flipper.ghost{background:var(--c-transparent);box-shadow:none}.ds-flipper:hover,[data-preview-state=hover] .ds-flipper{box-shadow:var(--sh-flipper-hover)}.ds-flipper:active,[data-preview-state=pressed] .ds-flipper{box-shadow:var(--sh-flipper-pressed)}.ds-flipper:focus-visible,[data-preview-state=focus-visible] .ds-flipper{outline:var(--bw-2) solid var(--c-flipper-focus);outline-offset:var(--control-focus-offset);box-shadow:var(--sh-flipper-focus)}.ds-flipper :where(svg){width:var(--flp-icon);height:var(--flp-icon);flex-shrink:0;display:block}@media (prefers-reduced-motion:reduce){.ds-flipper{transition:none}}