/* The burger. No script: the toggle's aria-expanded is the only state its morphs read. */
/* round() keeps each line on whole device pixels, or a hairline paints as two faint rows. */
.sk-burger {
  --sk-burger-w: round(var(--sk-icon-size), 1px);
  --sk-burger-line: round(up, max(1.5px, calc(var(--sk-burger-w) / 10)), 1px);
  --sk-burger-gap: round(calc(var(--sk-burger-w) * 0.28), 1px);
  /* A fraction of the bar's clock, never a second duration. */
  --sk-burger-stage: calc(var(--sk-dur-bar, 250ms) * 0.64);
  position: relative;
  display: block;
  inline-size: var(--sk-burger-w);
  block-size: var(--sk-burger-w);
}
/* After the block, so the box stays on .sk-burger: an absolute <i> would span the viewport. */
.sk-burger[data-lines="two"] {
  --sk-burger-gap: round(calc(var(--sk-burger-w) * 0.18), 1px);
}
.sk-burger > i {
  position: absolute;
  inset-inline: 0;
  inset-block-start: round(calc(50% - var(--sk-burger-line) / 2), 1px);
  block-size: var(--sk-burger-line);
  border-radius: var(--sk-burger-line);
  background: currentcolor;
  transition:
    translate var(--sk-dur-bar, 250ms) var(--sk-ease-burger, ease) var(--sk-burger-stage),
    rotate var(--sk-dur-bar, 250ms) var(--sk-ease-burger, ease),
    opacity var(--sk-dur-bar, 250ms) var(--sk-ease-burger, ease);
}
.sk-burger > i:first-child {
  translate: 0 calc(-1 * var(--sk-burger-gap));
}
.sk-burger > i:last-child {
  translate: 0 var(--sk-burger-gap);
}
/* Opening travels first and turns after, or the lines draw a bow tie. */
[aria-expanded="true"] .sk-burger > i {
  transition:
    translate var(--sk-dur-bar, 250ms) var(--sk-ease-burger, ease),
    rotate var(--sk-dur-bar, 250ms) var(--sk-ease-burger, ease) var(--sk-burger-stage),
    opacity var(--sk-dur-bar, 250ms) var(--sk-ease-burger, ease);
}
[aria-expanded="true"] .sk-burger[data-lines="three"] > i:nth-child(2) {
  opacity: 0;
}

/* SQUEEZE: converge, then cross. */
[aria-expanded="true"] .sk-burger[data-morph="squeeze"] > i:first-child {
  translate: 0 0;
  rotate: 45deg;
}
[aria-expanded="true"] .sk-burger[data-morph="squeeze"] > i:last-child {
  translate: 0 0;
  rotate: -45deg;
}

/* SPIN: the whole glyph turns a half turn. */
.sk-burger[data-morph="spin"] {
  transition: rotate var(--sk-dur-bar, 250ms) var(--sk-ease-burger, ease);
  /* The lines' own seating expression, or rounding lands the X a pixel off. */
  transform-origin: 50%
    calc(round(calc(50% - var(--sk-burger-line) / 2), 1px) + var(--sk-burger-line) / 2);
}
[aria-expanded="true"] .sk-burger[data-morph="spin"] {
  rotate: 180deg;
}
[aria-expanded="true"] .sk-burger[data-morph="spin"] > i:first-child {
  translate: 0 0;
  rotate: 45deg;
}
[aria-expanded="true"] .sk-burger[data-morph="spin"] > i:last-child {
  translate: 0 0;
  rotate: -45deg;
}

/* SLIDE: the lines slide past each other in one move. */
[aria-expanded="true"] .sk-burger[data-morph="slide"] > i {
  transition:
    translate var(--sk-dur-bar, 250ms) var(--sk-ease-burger, ease),
    rotate var(--sk-dur-bar, 250ms) var(--sk-ease-burger, ease),
    opacity var(--sk-dur-bar, 250ms) var(--sk-ease-burger, ease);
}
[aria-expanded="true"] .sk-burger[data-morph="slide"] > i:first-child {
  translate: 0 0;
  rotate: 45deg;
}
[aria-expanded="true"] .sk-burger[data-morph="slide"] > i:last-child {
  translate: 0 0;
  rotate: -45deg;
}

@media (prefers-reduced-motion: reduce) {
  .sk-burger,
  .sk-burger > i {
    transition: none;
  }
}