/*
pug index.pug -w
sass main.scss:main.css -w
*/
@layer global {
  label {
    cursor: pointer;
  }
  h1, h2, h3, p, ul {
    margin: 0;
  }
  h1, h2, h3 {
    font-weight: 600;
  }
}
:root {
  color-scheme: dark;
  --pixel-size: 4px;
  user-select: none;
  --color-0: initial;
  --color-1: initial;
  --color-2: initial;
  --columns: initial;
  --rows: initial;
  --canvas-border-width: 1px;
  --canvas-margin-block: 1rem;
  --edit-colors-heading-height: 3rem;
  --edit-colors-margin-left: 2.5rem;
  --colors-line-height: 3rem;
  --colors-font-size: 2rem;
  --background: #111;
  color: white;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --background: white;
    color: black;
  }
}
body {
  background-color: var(--background);
  min-block-size: 100dvb;
  margin: 0;
  box-sizing: border-box;
  font-family: system-ui, sans-serif;
  padding: 1rem;
  gap: 1rem;
  display: grid;
  grid-template: auto 1fr/auto 1fr;
  grid-template-areas: "aside main" "aside main";
}

.info {
  background-color: var(--background);
  flex-basis: 20rem;
  flex-grow: 1;
  box-sizing: border-box;
  z-index: 1;
  grid-area: aside;
  max-inline-size: 20rem;
}
.info > .inner-container {
  background-color: rgba(30, 144, 255, 0.2);
  padding: 1rem;
  box-sizing: border-box;
  min-block-size: 100%;
  border-radius: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.mobile-warning {
  background-color: rgba(255, 34, 68, 0.3333333333);
  background-color: color-mix(in srgb, #ff2244 30%, var(--background));
  padding: 1rem;
  border-radius: 1rem;
}

@media (hover: hover) {
  .mobile-warning {
    display: none;
  }
}
main {
  flex-grow: 10000;
  flex-basis: auto;
  grid-area: main;
  display: grid;
  place-items: center;
}
main > .inner-container {
  contain: paint;
}

.canvas-container {
  background-color: var(--background);
  inline-size: 100%;
  z-index: 1;
  display: flex;
  justify-content: center;
  position: relative;
}
.canvas-container .canvas {
  display: grid;
  grid-template-columns: repeat(var(--columns), 1fr);
  inline-size: fit-content;
  border: var(--canvas-border-width) solid rgba(136, 136, 136, 0.2666666667);
  margin-block: var(--canvas-margin-block);
}

@media (max-width: 70rem) {
  body {
    grid-template-areas: "aside aside" "main main";
  }
  .info {
    max-inline-size: revert;
  }
}
.pixel {
  inline-size: var(--pixel-size);
  block-size: var(--pixel-size);
  --play-state-color-0: paused;
  --play-state-color-1: paused;
  --play-state-color-2: paused;
  animation: 0ms linear 1ms forwards var(--play-state-color-0) color-0, 0ms linear 1ms forwards var(--play-state-color-1) color-1, 0ms linear 1ms forwards var(--play-state-color-2) color-2;
}
@keyframes color-0 {
  to {
    border-radius: 50%;
    background-color: var(--color-0);
    box-shadow: 0 0 0 2px var(--color-0);
  }
}
input#color-0[type=radio]:checked ~ .canvas-container .canvas:active .pixel:hover {
  --play-state-color-0: running;
}
@keyframes color-1 {
  to {
    border-radius: 50%;
    background-color: var(--color-1);
    box-shadow: 0 0 0 2px var(--color-1);
  }
}
input#color-1[type=radio]:checked ~ .canvas-container .canvas:active .pixel:hover {
  --play-state-color-1: running;
}
@keyframes color-2 {
  to {
    border-radius: 50%;
    background-color: var(--color-2);
    box-shadow: 0 0 0 2px var(--color-2);
  }
}
input#color-2[type=radio]:checked ~ .canvas-container .canvas:active .pixel:hover {
  --play-state-color-2: running;
}

input[type=radio][name=color] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.color-chooser > label[for=color-0] {
  background-image: -moz-element(#color-0-style);
  background-image: element(#color-0-style);
  --color: var(--color-0);
}

input[type=radio][name=color]#color-0:checked ~ .color-chooser > label[for=color-0] {
  box-shadow: inset 0 0 0 3px var(--color);
}
input[type=radio][name=color]#color-0:checked ~ .color-chooser > label[for=color-0]::before {
  box-shadow: inset 0 0 0 1rem var(--color);
}

input[type=radio][name=color]#color-0:focus-visible ~ .color-chooser > label[for=color-0] {
  outline: 2px dotted rgba(255, 255, 255, 0.6666666667);
  outline-offset: -7px;
}

.color-chooser > label[for=color-1] {
  background-image: -moz-element(#color-1-style);
  background-image: element(#color-1-style);
  --color: var(--color-1);
}

input[type=radio][name=color]#color-1:checked ~ .color-chooser > label[for=color-1] {
  box-shadow: inset 0 0 0 3px var(--color);
}
input[type=radio][name=color]#color-1:checked ~ .color-chooser > label[for=color-1]::before {
  box-shadow: inset 0 0 0 1rem var(--color);
}

input[type=radio][name=color]#color-1:focus-visible ~ .color-chooser > label[for=color-1] {
  outline: 2px dotted rgba(255, 255, 255, 0.6666666667);
  outline-offset: -7px;
}

.color-chooser > label[for=color-2] {
  background-image: -moz-element(#color-2-style);
  background-image: element(#color-2-style);
  --color: var(--color-2);
}

input[type=radio][name=color]#color-2:checked ~ .color-chooser > label[for=color-2] {
  box-shadow: inset 0 0 0 3px var(--color);
}
input[type=radio][name=color]#color-2:checked ~ .color-chooser > label[for=color-2]::before {
  box-shadow: inset 0 0 0 1rem var(--color);
}

input[type=radio][name=color]#color-2:focus-visible ~ .color-chooser > label[for=color-2] {
  outline: 2px dotted rgba(255, 255, 255, 0.6666666667);
  outline-offset: -7px;
}

.color-chooser, .color-settings-container {
  --height: var(--colors-line-height);
}

.color-chooser, .color-settings {
  display: flex;
  gap: 1rem;
}

.color-settings-container .inner-style-container, .color-chooser > label {
  font-size: var(--colors-font-size);
  overflow: hidden;
  block-size: var(--height);
  line-height: var(--colors-line-height);
  border-radius: 0.3rem;
}

.color-chooser {
  z-index: 1;
  position: relative;
}
.color-chooser > label {
  display: flex;
  align-items: center;
  border-radius: 0.6rem;
  padding: 0.7rem;
  box-sizing: border-box;
  inline-size: 15rem;
  box-shadow: inset 0 0 0 0px var(--color);
  transition: box-shadow 0.3s;
  background-repeat: no-repeat;
  background-position-x: var(--edit-colors-margin-left);
}
.color-chooser > label::before {
  content: "";
  display: block;
  border-radius: 50%;
  block-size: 100%;
  aspect-ratio: 1;
  box-sizing: border-box;
  box-shadow: inset 0 0 0 3px var(--color);
  transition: box-shadow 0.3s;
}

.edit-colors-heading {
  block-size: var(--edit-colors-heading-height);
  background-color: var(--background);
  padding-inline-start: var(--edit-colors-margin-left);
  z-index: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.color-settings-container {
  counter-reset: color-index;
}
.color-settings-container .color-settings {
  --distance: calc((var(--canvas-margin-block) + var(--canvas-border-width)) * 2 + var(--edit-colors-heading-height) + var(--rows) * var(--pixel-size));
}
.color-settings-container .color-settings .outer-style-container {
  box-sizing: border-box;
  position: relative;
  margin-inline-start: var(--edit-colors-margin-left);
  inline-size: calc(15rem - var(--edit-colors-margin-left));
  outline: 2px solid rgba(136, 136, 136, 0.2);
  outline-offset: -2px;
  border-radius: 0.3rem;
}
.color-settings-container .color-settings .outer-style-container:focus-within {
  background-color: rgba(136, 136, 136, 0.2);
}
.color-settings-container .color-settings .outer-style-container::before {
  content: counter(color-index) ".";
  counter-increment: color-index;
  position: absolute;
  inset-block: 0;
  inset-inline-start: calc(-1 * var(--edit-colors-margin-left));
  inline-size: var(--edit-colors-margin-left);
  font-size: var(--colors-font-size);
  line-height: var(--colors-line-height);
  text-align: end;
  padding-inline-end: 0.2em;
  box-sizing: border-box;
  opacity: 0.6;
}
@supports not ((background: element(#a)) or (background: -moz-element(#a))) {
  .color-settings-container .color-settings .middle-style-container {
    -webkit-box-reflect: above calc(var(--distance) + var(--height));
  }
  .color-settings-container .color-settings .middle-style-container .inner-style-container {
    -webkit-box-reflect: above;
  }
}
.color-settings-container .color-settings .inner-style-container > style {
  box-sizing: border-box;
  margin-block-start: calc(var(--colors-line-height) * -1);
  display: block;
  white-space: pre;
  overflow: hidden;
  padding-inline: 0.3em;
}
.color-settings-container .color-settings .inner-style-container > style:focus {
  outline: none;
}

/*# sourceMappingURL=main.css.map */