:root {
  --offset: calc(0.5s * 0.5);
  --step: 0.5s;
  --ease: linear(
    0 0%, 0.2342 12.49%, 0.4374 24.99%, 0.6093 37.49%, 0.6835 43.74%,
    0.7499 49.99%, 0.8086 56.25%, 0.8593 62.5%, 0.9023 68.75%, 0.9375 75%,
    0.9648 81.25%, 0.9844 87.5%, 0.9961 93.75%, 1 100%
  );
  --button-light: hsl(223 4% 73%);
  --button-dark: hsl(220 27% 6%);
}

.toggle {
  background: #0000;
  font-size: 24px;
  height: 3em;
  padding: 0;
  border-radius: 3em;
  border: 0;
  aspect-ratio: 1.8 / 1;
  position: relative;
  cursor: pointer;
  scale: 0.6; /* Shrink to fit header */
  transform-origin: center right;
}

.toggle::after {
  content: '';
}

.toggle :is(.socket, .face) {
  position: absolute;
  border-radius: 3em;
}

.toggle::before {
  pointer-events: none;
  content: '';
  width: 150vmax;
  height: 200vmax;
  aspect-ratio: 1;
  border-radius: 0%;
  background: radial-gradient(hsl(0 0% 100% / 0.25), hsl(0 0% 0% / 1) 35%);
  position: absolute;
  translate: -50% -65%;
  left: 50%;
  top: 50%;
  z-index: -1;
  opacity: 0; /* Keep it invisible to not break SATO bg */
}

/* light mode */
.socket {
  box-shadow: -0.05em 0.1em 0.2em -0.2em white;
  background: var(--button-dark);
  position: relative;
  inset: 0;
  width: 100%;
  height: 100%;
}

.socket-shadow {
  position: absolute;
  inset: 0 0em;
  opacity: 0;
  border-radius: inherit;
  box-shadow: 0em 0.075em 0.1em 0em white;
}

.face {
  inset: 0.15em;
  width: calc(100% - 0.3em);
  height: calc(100% - 0.3em);
}

.face-shadow,
.face-shadow::after,
.face-shadow::before {
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.face-shadow::after,
.face-shadow::before {
  content: '';
}
.face-shadow::before {
  background: black;
}
.face-shadow::after {
  background: white;
}

.face-plate {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: -0.05em 0.1em 0.2em -0.2em white inset;
  background: conic-gradient(from 45deg, #0000, hsl(0 0% 100% / 0.05)), var(--button-dark);
}

.face-shine {
  position: absolute;
  inset: 0;
  opacity: 0;
  border-radius: 3em;
}

.face-shine-shadow {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  mask: conic-gradient(
    from 0deg,
    #fff 90deg,
    #0000 110deg 200deg,
    #fff 215deg 280deg,
    #0000 315deg
  );
  box-shadow: 0.075em 0 0.025em -0.025em hsl(0 0% 0% / 0.5) inset,
    -0.075em -0.05em 0.025em -0.025em hsl(0 0% 0% / 0.5) inset;
}

.face-shine::before {
  content: '';
  position: absolute;
  inset: 0.05em;
  border-radius: 3em;
  box-shadow: 0 -0.05em 0.025em -0.025em hsl(0 0% 50% / 0.5) inset,
    -0.025em 0.05em 0.025em -0.025em hsl(0 0% 100% / 0.5) inset;
}
.face-shine::after {
  content: '';
  position: absolute;
  inset: 0;
  background: conic-gradient(from 45deg, #0000, hsl(0 0% 100% / 0.25));
  border-radius: 3em;
}

.face svg {
  --glow: hsl(182 90% 92%);
  width: 25%;
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -52% -48%;
  overflow: visible !important;
}

.face svg path {
  transform-box: fill-box;
  transform-origin: center center;
}

.glow {
  z-index: 3;
  filter: drop-shadow(0 0 0.2em var(--glow));
  will-change: opacity;
}

.trail-holder {
  z-index: 2;
  filter: blur(10px);
}
.trail-holder .trail {
  stroke-width: 4;
}

.trail {
  stroke-dashoffset: 0;
}

.inner-face {
  fill: hsl(230 5% 80%);
}

.glow-path {
  fill: var(--glow);
  stroke: var(--glow);
  opacity: 1;
  stroke-width: 0px;
}

/* Transitions and Glow Trail */
.trail {
  stroke-dasharray: 10 80;
  stroke-dashoffset: 10;
  opacity: 0;
  transition-property: stroke-dashoffset, opacity;
  transition-duration: calc(var(--step) * 3), calc(var(--step) * 0.5);
  transition-delay: var(--offset), calc(var(--offset) + (var(--step) * 2.5));
  transition-timing-function: var(--ease), linear;
}

.toggle[aria-pressed='true'] .trail {
  transition: stroke-dashoffset 0s;
  opacity: 1;
  stroke-dashoffset: -70;
}

.glow {
  opacity: 1;
  transition-property: opacity;
  transition-duration: 1.25s;
  transition-delay: var(--offset);
  transition-timing-function: linear;
}

.toggle[aria-pressed='true'] .glow {
  opacity: 0;
  transition-property: opacity;
  transition-duration: var(--step);
  transition-delay: 0s;
  transition-timing-function: var(--ease);
}

.face-glowdrop {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  scale: 0;
  transition-property: scale;
  transition-duration: var(--step);
  transition-timing-function: var(--ease);
}

.face-glowdrop::after,
.face-glowdrop::before {
  content: '';
  height: 50%;
  aspect-ratio: 1;
  background: #fff;
  filter: blur(6px);
  position: absolute;
  z-index: -1;
  border-radius: 50%;
}

.face-glowdrop::before {
  left: 4%;
  width: 56%;
  translate: 0 -25%;
}

.face-glowdrop::after {
  bottom: 0;
  right: 12%;
  width: 34%;
  translate: 0 20%;
}

.face-glows {
  position: absolute;
  inset: -0.075em;
  opacity: 0;
  border-radius: inherit;
  mix-blend-mode: plus-lighter;
  filter: blur(8px);
  z-index: 20;
  mask: conic-gradient(from 280deg, #0000, #fff 20deg 45deg, #0000 95deg),
    conic-gradient(from 110deg, #0000, #fff 20deg, #0000 95deg);
}

.face-glows div {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  filter: blur(4px);
  border: 0.1em solid white;
}

/* Standard Transitions */
.socket { transition: background-color var(--step) var(--ease), box-shadow var(--step) var(--ease); }
.face { transition: scale var(--step) var(--ease); scale: 1; }
.outline { transition: stroke var(--step) var(--ease); }
.inner-bg { fill: black; transition: fill var(--step) var(--ease); }
.toggle::before { transition: scale var(--step) var(--ease), opacity var(--step) var(--ease); }

.face-shadow::after,
.face-shadow::before { transition: opacity var(--step) var(--ease), translate var(--step) var(--ease), filter var(--step) var(--ease), scale var(--step) var(--ease); }
.face-shadow::after { scale: 0.5; }
.face-plate { transition: background-color var(--step) var(--ease); }
.socket-shadow, .face-glows, .face-shine { transition: opacity var(--step) var(--ease); }

/* Active & Toggled State */
.toggle:active .socket { box-shadow: -0.045em 0.1em 0.2em -0.15em white; }
.toggle:active .face { scale: 0.99; }

.toggle[aria-pressed='true'] .face { scale: 1.12; }
.toggle[aria-pressed='true'] .outline { stroke: hsl(0 0% 30%); }
.toggle[aria-pressed='true'] .inner-bg { fill: hsl(0 0% 20%); }
.toggle[aria-pressed='true'] .socket { box-shadow: -0.025em 0.08em 0.2em -0.1em white; }
.toggle[aria-pressed='true'] .glow { opacity: 0; }
.toggle[aria-pressed='true'] .face-glowdrop { scale: 1; }
.toggle[aria-pressed='true'] .face-shadow::before { translate: -15% 55%; filter: blur(1em); opacity: 0.35; }
.toggle[aria-pressed='true'] .face-shadow::after { filter: blur(0.5em); scale: 1; }
.toggle[aria-pressed='true'] .socket-shadow,
.toggle[aria-pressed='true'] .face-glows,
.toggle[aria-pressed='true'] .face-shine { opacity: 1; }