/* The zipper button: an indigo cloth pill with brass teeth, on a white page. The script draws the two sides of the
   cloth, the teeth and the pull in an SVG, and the orange lining shows where the zipper is open. */
:root {
  --page: #ffffff;          /* the page */
  --cloth: #22305a;         /* the cloth of the button */
  --twill: #2c3d6f;         /* the lines woven into it */
  --tape: #18223f;          /* the tape the teeth are sewn to */
  --stitch: #e9dcc2;        /* the stitches round the edge */
  --brass: #dcb85e;         /* the teeth and the pull */
  --brass-dark: #9a7728;
  --lining: #ff7a2f;        /* the lining inside */
  --ink: #fbf6ec;           /* the words on the cloth and on the lining */
  --muted: #8a8478;         /* the line under the button */
}

* {
  box-sizing: border-box;
}

/* a tap is a click at once: no wait for a double tap */
html {
  touch-action: manipulation;
}

html,
body {
  margin: 0;
  overflow-x: clip;
}

body {
  min-height: 100svh;
  background: var(--page);
  color: #1f1c17;
  font-family: 'Parkinsans Variable', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.stage {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 72px 16px;
}

.zip {
  display: grid;
  justify-items: center;
  gap: 20px;
}

/* ---------------------------------------------------------------- the button */
.zip__btn {
  position: relative;
  display: block;
  width: min(320px, calc(100vw - 48px));
  height: 68px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* the cloth, the teeth and the pull: the two sides can open past the button's edges */
.zip__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.zip__label {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 62px;
  right: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  pointer-events: none;
}

.zip__name,
.zip__size {
  display: inline-block;
}

.zip__name {
  font-size: 17px;
  font-weight: 620;
  letter-spacing: -0.01em;
}

.zip__size {
  color: color-mix(in srgb, var(--ink) 62%, transparent);
  font-size: 13px;
  font-weight: 500;
}

/* the saved file, on the lining once the sides have fallen open */
.zip__done {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  opacity: 0;
  pointer-events: none;
}

.zip__check {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.zip__saved {
  display: grid;
  gap: 1px;
  text-align: left;
}

.zip__saved-name {
  font-size: 16px;
  font-weight: 650;
  line-height: 1.2;
}

.zip__saved-file {
  font-size: 12px;
  font-weight: 500;
  opacity: 0.8;
}

.zip__hint {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  text-align: center;
}

.zip__hint span {
  display: inline-block;
}

.zip__btn:focus-visible {
  outline: 2px solid var(--cloth);
  outline-offset: 5px;
}

html[data-using='pointer'] .zip__btn:focus-visible {
  outline: none;
}

/* ---------------------------------------------------------------- the drawing */
.zip__lining {
  fill: var(--lining);
}

.zip__count {
  fill: var(--ink);
  font-size: 14px;
  font-weight: 700;
}

.zip__side {
  fill: url(#zip-twill);
}

.zip__twill-bg {
  fill: var(--cloth);
}

.zip__twill-line {
  fill: var(--twill);
}

.zip__stitch {
  fill: none;
  stroke: var(--stitch);
  stroke-width: 1.2;
  stroke-dasharray: 4 3.2;
  opacity: 0.5;
}

.zip__tape {
  fill: none;
  stroke: var(--tape);
  stroke-width: 5.5;
}

.zip__teeth {
  fill: var(--brass);
  stroke: var(--brass-dark);
  stroke-width: 0.6;
}

.zip__metal {
  fill: url(#zip-brass);
  stroke: var(--brass-dark);
  stroke-width: 0.8;
}

.zip__ridge {
  fill: none;
  stroke: var(--brass-dark);
  stroke-width: 0.9;
  stroke-linecap: round;
  opacity: 0.7;
}

.zip__brass-a {
  stop-color: #f4de98;
}

.zip__brass-b {
  stop-color: var(--brass);
}