/* =========================================================================
   Element · Button / Round — Figma 7044:226 (page Global: Elements)
   54 variants: Icon × Style × Size × State.
     Icon   Arrow | Next | Play | Open | Collapse | Chevron → .e-button-round--arrow, …
     Style  Outline | Filled | Outline Light → --outline | --filled | --outline-light
     Size   44 | 32 → --44 | --32; no size class = size/icon (32 → 44 at 1392)
     State  Hover → :hover/:focus-visible (on the button or any link, button,
            summary or .u-hit around it); Disabled → :disabled / [aria-disabled=true]

   The ring is ::before, the glyph is .e-button-round__glyph: the glyph is
   Figma's own vector (assets/ds/icons/<icon>-<size>.svg, drawn in the whole
   button box, so it sits exactly where Figma puts it) used as a mask and
   painted in currentColor.

   Hover: the look is Figma's (Outline: the ring goes Black; Outline Light:
   White; Filled: the disc stays), the motion the old prototype's — .12s
   linear, the glyph grows ×1.3 (Figma draws the hover glyph ×1.15).
   flip=true → .e-button-round--flip: the glyph turned 180° (a carousel's
   Back: Figma rotates the Next instance, it has no Back icon).
   Disabled: the whole button at 30% (Figma: layer opacity 0.3, a raw value).

   Raw in Figma (no variable): the sizes 44 and 32, the full radius (160/100),
   the ring width 1.5 (Outline Light: 1).
   ========================================================================= */
.e-button-round {
  --e-br-size: var(--size-icon);
  --e-br-glyph: var(--e-br-glyph-32);
  --e-br-line: transparent;
  --e-br-line-hover: var(--e-br-line);
  --e-br-line-width: 1.5px;
  --e-br-fill: transparent;
  position: relative;
  flex: none;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  width: var(--e-br-size);
  height: var(--e-br-size);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--color-black);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
@media (min-width: 1392px) {
  .e-button-round { --e-br-glyph: var(--e-br-glyph-44); }
}
.e-button-round--44 { --e-br-size: 44px; --e-br-glyph: var(--e-br-glyph-44); }
.e-button-round--32 { --e-br-size: 32px; --e-br-glyph: var(--e-br-glyph-32); }

.e-button-round::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 var(--e-br-line-width) var(--e-br-line);
  background: var(--e-br-fill);
  transition: box-shadow var(--ds-ink-duration) var(--ds-ink-ease);
}
.e-button-round__glyph {
  position: relative;
  width: 100%;
  height: 100%;
  background: currentColor;
  -webkit-mask: var(--e-br-glyph) center / 100% 100% no-repeat;
  mask: var(--e-br-glyph) center / 100% 100% no-repeat;
  transition: scale var(--ds-ink-duration) var(--ds-ink-ease);
}

/* Style */
.e-button-round--outline       { --e-br-line: var(--color-black-30); --e-br-line-hover: var(--color-black); color: var(--color-black); }
.e-button-round--filled        { --e-br-fill: var(--color-white); color: var(--color-black); }
.e-button-round--outline-light { --e-br-line: var(--color-white-30); --e-br-line-hover: var(--color-white); --e-br-line-width: 1px; color: var(--color-white); }

/* Icon — Figma's glyphs, per size */
.e-button-round--arrow { --e-br-glyph-44: url("../../../assets/ds/icons/arrow-44.svg"); --e-br-glyph-32: url("../../../assets/ds/icons/arrow-32.svg"); }
.e-button-round--next { --e-br-glyph-44: url("../../../assets/ds/icons/next-44.svg"); --e-br-glyph-32: url("../../../assets/ds/icons/next-32.svg"); }
.e-button-round--play { --e-br-glyph-44: url("../../../assets/ds/icons/play-44.svg"); --e-br-glyph-32: url("../../../assets/ds/icons/play-32.svg"); }
.e-button-round--open { --e-br-glyph-44: url("../../../assets/ds/icons/open-44.svg"); --e-br-glyph-32: url("../../../assets/ds/icons/open-32.svg"); }
.e-button-round--collapse { --e-br-glyph-44: url("../../../assets/ds/icons/collapse-44.svg"); --e-br-glyph-32: url("../../../assets/ds/icons/collapse-32.svg"); }
.e-button-round--chevron { --e-br-glyph-44: url("../../../assets/ds/icons/chevron-44.svg"); --e-br-glyph-32: url("../../../assets/ds/icons/chevron-32.svg"); }

/* flip: Back is Figma's Next turned round */
.e-button-round--flip .e-button-round__glyph { rotate: 180deg; }

/* State=Hover */
@media (any-hover: hover) {
  .e-button-round:is(:hover, :focus-visible):not(:disabled, [aria-disabled="true"]),
  :is(a, button, summary, .u-hit):is(:hover, :focus-visible) .e-button-round:not(:disabled, [aria-disabled="true"]) {
    --e-br-line: var(--e-br-line-hover);
  }
  .e-button-round:is(:hover, :focus-visible):not(:disabled, [aria-disabled="true"]) .e-button-round__glyph,
  :is(a, button, summary, .u-hit):is(:hover, :focus-visible) .e-button-round:not(:disabled, [aria-disabled="true"]) .e-button-round__glyph {
    scale: 1.3;
  }
}

/* State=Disabled */
.e-button-round:is(:disabled, [aria-disabled="true"]) { opacity: .3; cursor: default; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .e-button-round::before, .e-button-round__glyph { transition: none; }
}