/* The fireplace switch: the tile of a smart home app, a pill as round as the switch inside it, and the switch is a
   slot of black glass with a white knob. The flames are drawn on a canvas: their colour is worked out from the
   temperature of the fire, so it is not here; the warm light on the knob and on the tile takes it from the script. */
:root {
  --page: #ffffff;          /* the page */
  --wall: #f1f0ee;          /* the tile, like the plaster round the fireplace */
  --ink: #1b1916;           /* the name */
  --muted: #625e58;         /* the room */
  --glass: #0e0d0c;         /* the black glass of the firebox */
  --floor: #171513;         /* the glass floor under the burner */
  --burner: #3a3531;        /* the edge of the burner */
  --knob: #ffffff;          /* the knob */
  --focus: #c2410c;         /* the ring of the keyboard's focus */
}

* {
  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: var(--ink);
  font-family: 'Wix Madefor Text Variable', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

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

/* ---------------------------------------------------------------- the tile */
/* as round as the switch, and 16 pixels round it: the two curves are concentric */
.tile {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: min(380px, 100%);
  padding: 16px 16px 16px 28px;
  border-radius: 44px;
  background: var(--wall);
  isolation: isolate;
}

/* the light of the fire on the wall round the slot: its opacity follows how much fire there is */
.tile__warmth {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(160px 72px at calc(100% - 108px) 50%, var(--warm, #ff9a3c), transparent 72%);
  opacity: 0;
  pointer-events: none;
}

.tile__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.tile__name {
  font-size: 18px;
  font-weight: 620;
  line-height: 1.2;
  letter-spacing: -0.012em;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

.tile__room {
  font-size: 14px;
  font-weight: 450;
  line-height: 1.25;
  color: var(--muted);
}

/* ---------------------------------------------------------------- the fireplace */
.fire {
  position: relative;
  flex: none;
  width: 184px;
  height: 56px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--glass);
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  /* a finger dragged across moves the knob; up and down the page still scrolls */
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
}

.fire:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 4px;
}

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

.fire:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.tile:has(.fire:disabled) .tile__name {
  cursor: default;
  color: var(--muted);
}

/* the inside of the firebox: the back a little lighter at the top, and under the burner a floor of glass */
.fire__box {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(180deg, transparent 0 43px, var(--burner) 43px 44px, var(--floor) 44px),
    radial-gradient(90% 120% at 50% 0%, color-mix(in srgb, var(--glass), #ffffff 7%), var(--glass) 70%);
  pointer-events: none;
}

.fire__flames {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* the flames as they were, fading away over the new ones when the motion is reduced */
.fire__was {
  opacity: 0;
}

/* the glass in front: sunk into the wall, a long reflection across the top, and the floor darker as it goes away */
.fire__glass {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(180deg, transparent 0 46px, color-mix(in srgb, var(--floor), transparent 60%) 56px),
    linear-gradient(172deg, rgba(255, 255, 255, 0.075) 0 22%, rgba(255, 255, 255, 0) 23%);
  box-shadow:
    inset 0 2px 3px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(0, 0, 0, 0.5),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08);
  pointer-events: none;
}

/* ---------------------------------------------------------------- the knob */
/* two boxes: the knob runs along the slot and gets wider while it is held, and the puck squashes against the end */
.fire__knob {
  position: absolute;
  left: 0;
  top: 4px;
  width: 48px;
  height: 48px;
  pointer-events: none;
}

.fire__puck {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 62%),
    radial-gradient(100% 100% at 50% 100%, rgba(0, 0, 0, 0.07), rgba(0, 0, 0, 0) 55%),
    var(--knob);
  box-shadow:
    0 0 0 0.5px rgba(0, 0, 0, 0.4),
    0 1px 1.5px rgba(0, 0, 0, 0.45),
    0 4px 10px rgba(0, 0, 0, 0.5),
    inset 0 -1px 1px rgba(0, 0, 0, 0.08);
}

/* the light of the fire on the side of the knob that faces it: the script sets the opacity of each side */
.fire__lit {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  mix-blend-mode: multiply;
}

.fire__lit--left {
  background: radial-gradient(110% 120% at -10% 62%, var(--warm, #ff9a3c), transparent 66%);
}

.fire__lit--right {
  background: radial-gradient(110% 120% at 110% 62%, var(--warm, #ff9a3c), transparent 66%);
}