@import '/modules/codie/codie.css';

icon[share] {
  --icon: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%225%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%226%22%20cy%3D%2212%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%2219%22%20r%3D%223%22%2F%3E%3Cpath%20d%3D%22m8.6%2013.5%206.8%204M15.4%206.5l-6.8%204%22%2F%3E%3C%2Fsvg%3E');
}

body {
  display: flex;
  height: 100vh;
  margin: 0;
  overflow: hidden;
}

codie {
  width: 50%;
  border-radius: 0;
}

canvas-frame {
  flex: 1;
}

canvas-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: white;
}

bar {
  position: fixed;
  right: 24px;
  bottom: 24px;
  flex-direction: row;
  align-items: center;
  gap: calc(var(--unit) * 1);
  padding: calc(var(--unit) * 2);
  box-shadow:
    inset 0 0 0 1px var(--border),
    inset 0 2px var(--glare),
    1px 1px 1px 1px rgb(0 0 0 / 0.2);
}

bar label {
  display: flex;
  align-items: center;
  gap: calc(var(--unit) * 2);
  padding-inline: calc((var(--unit) * 12 - 1em) / 2);
}

tooltip-text span {
  display: flex;
  align-items: center;
  gap: calc(var(--unit) * 2);
}

tooltip-text {
  display: flex;
  flex-direction: column;
  gap: calc(var(--unit) * 1);
  padding: calc(var(--unit) * 2) calc(var(--unit) * 3);
  border-radius: var(--radius-control);
  box-shadow: inset 0 0 0 1px var(--border);
  background: var(--card);
  color: var(--card-foreground);
  font-size: calc(var(--unit) * 3.5);
  line-height: calc(var(--unit) * 4);
  white-space: nowrap;
}

cursors {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

cursor > * {
  position: absolute;
  translate: calc(var(--x) * 100vw) calc(var(--y) * 100vh);
  width: calc(var(--unit) * 1.5);
  aspect-ratio: 1;
  margin: calc(var(--unit) * -0.75);
  border-radius: 50%;
  background: var(--color);
}

cursor i {
  transition: translate 140ms ease-out;
  opacity: 0.5;
}

cursor i:nth-child(2) {
  transition-duration: 240ms;
  scale: 0.75;
  opacity: 0.35;
}

cursor i:first-child {
  transition-duration: 360ms;
  scale: 0.5;
  opacity: 0.2;
}

dot {
  width: calc(var(--unit) * 2.5);
  margin: calc(var(--unit) * -1.25);
  transition: translate 60ms linear;
  animation: shimmer 1.6s ease-in-out infinite;
}

@keyframes shimmer {
  50% {
    box-shadow: 0 0 0 calc(var(--unit) * 1) oklch(from var(--color) l c h / 0.25);
    filter: brightness(1.15);
  }
}