:root {
  --Editor--background: var(--body--background);
  --Editor--color: var(--body--color);

  --Handle--width: 1em;
  /* --Handle_Focus--height: 200%; */
  --Handle_Focus--height: 100%;
  --Handle_Focus--background: rgb(43, 0, 255);
  /* --Handle--background-color: color-mix(in hsl, var(--Handle_Focus--background), transparent 30%); */
  --Handle--background-color: color-mix(
    in hsl,
    var(--Handle_Focus--background),
    transparent 90%
  );
  --Handle_Focus--box-shadow: 0 -0.5em 0 0 var(--Handle--background-color),
    0 0.5em 0 0 var(--Handle--background-color);

  --Handle--border-radius: var(--Handle--width);
  --Handle_Left--border-radius: var(--Handle--border-radius) 0 0
    var(--Handle--border-radius);
  --Handle_Right--border-radius: 0 var(--Handle--border-radius)
    var(--Handle--border-radius) 0;

  /* --Handle_inside--background: color-mix(in hsl, var(--Handle--background-color), transparent 90%); */
  --Handle_inside--background: var(--Handle--background-color);
}

.Editor {
  flex: 1 1 auto;

  display: flex;
  flex-direction: row;

  font-family: monospace;

  & > .root {
    padding: 1em;

    flex: 1 1 auto;
    overflow-y: auto;
  }

  & > .diagnostics {
    padding: 1em;
    border-left: 0.1em solid black;

    flex: 0 0 33%;
    overflow-y: auto;
  }
}

.Expr {
  display: flex;
  flex-direction: row;
  align-items: start;
  justify-content: flex-start;
  flex-wrap: wrap;

  user-select: none;

  & > * {
    height: 1.5em;
  }

  & > .label,
  & > .Punctuation {
    display: flex;
    align-items: center;

    white-space: nowrap;
    font-size: 1em;
  }
}

.Hole {
  padding: 0 0.5em;
  background-color: black;
  color: white;
  border-radius: var(--Handle--width);
  width: 0.5em;
  overflow: hidden;
  /* white-space: pre; */
  animation: Hole-passive 20s infinite linear;
}

.Point {
  min-width: var(--Handle--width);

  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  overflow: visible;

  & > .Left,
  & > .Middle,
  & > .Right {
    height: 100%;
    min-width: calc(var(--Handle--width) / 3);
  }

  &.Point_Handle_PointStatus {
    & > .Middle {
      border-radius: var(--Handle--width);
      background: var(--Handle--background-color);
      height: var(--Handle_Focus--height);
      background: var(--Handle_Focus--background);
    }
  }

  &.SpanH_Handle_Left_PointStatus {
    > .Left {
      background: var(--Handle--background-color);
      border-radius: var(--Handle_Left--border-radius);
    }

    &.LeftFocus_PointStatus > .Left {
      height: var(--Handle_Focus--height);
      background: var(--Handle_Focus--background);
    }

    & > .Middle,
    & > .Right,
    & ~ * {
      background: var(--Handle_inside--background);
    }
  }

  &.SpanH_Handle_Right_PointStatus {
    & > .Left,
    & > .Middle {
      background: var(--Handle_inside--background);
    }

    & > .Right {
      background: var(--Handle--background-color);
      border-radius: var(--Handle_Right--border-radius);
    }

    &.RightFocus_PointStatus > .Right {
      height: var(--Handle_Focus--height);
      background: var(--Handle_Focus--background);
    }

    background: var(--Editor--background);

    & ~ * {
      background: var(--Editor--background);
    }
  }

  &.ZipperH_Handle_OuterLeft_PointStatus {
    > .Left {
      background: var(--Handle--background-color);
      border-radius: var(--Handle_Left--border-radius);
    }

    &.LeftFocus_PointStatus > .Left {
      height: var(--Handle_Focus--height);
      background: var(--Handle_Focus--background);
    }

    & > .Middle,
    & > .Right,
    & ~ * {
      background: var(--Handle_inside--background);
    }
  }

  &.ZipperH_Handle_InnerLeft_PointStatus {
    & > .Left {
      background: var(--Handle--background-color);
    }

    &.LeftFocus_PointStatus > .Left {
      height: var(--Handle_Focus--height);
      background: var(--Handle_Focus--background);
    }

    & ~ * {
      background: var(--Editor--background);
    }

    background: var(--Editor--background);
  }

  &.ZipperH_Handle_InnerRight_PointStatus {
    > .Right {
      background: var(--Handle--background-color);
    }

    &.RightFocus_PointStatus > .Right {
      height: var(--Handle_Focus--height);
      background: var(--Handle_Focus--background);
    }

    & ~ * {
      background: var(--Handle_inside--background);
    }
  }

  &.ZipperH_Handle_OuterRight_PointStatus {
    & > .Left,
    & > .Middle {
      background: var(--Handle_inside--background);
    }

    & > .Right {
      background: var(--Handle--background-color);
      border-radius: var(--Handle_Right--border-radius);
    }

    &.RightFocus_PointStatus > .Right {
      height: var(--Handle_Focus--height);
      background: var(--Handle_Focus--background);
    }

    background: transparent;

    & ~ * {
      background: var(--Editor--background);
    }
  }

  .Buffer {
    margin: 0.5em;
    margin-top: -0.75em;

    padding: 0.5em;
    width: fit-content;

    display: flex;
    flex-direction: column;
    gap: 0.5em;

    border-radius: var(--Handle--width);
    background: rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 0 1em 0.1em rgba(0, 0, 0, 0.5);
    transition: box-shadow 0.3s ease;
    animation: Buffer-appear 0.2s forwards linear;

    & > .query {
      outline: none;
      border: none;
      border-radius: var(--Handle--width) var(--Handle--width)
        var(--Handle--width) 0;
      padding: 0.5em;

      width: fit-content;
      min-width: 1ch;
      transition: width 0.3s ease-in-out;

      animation: Buffer-query-passive 20s infinite linear;

      /* background: #1a1a1a;
      color: white; */

      background: var(--Editor--background);

      font-size: 1em;
      font-family: inherit;

      &:focus {
        box-shadow: 0 0 15px hsla(210deg 100% 60% / 0.5),
          0 4px 10px rgba(0, 0, 0, 0.2);
      }
    }

    & > .menu {
      overflow: visible;

      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
      gap: 0.5em;

      & > .Edit {
        padding: 0.5em;
        border-radius: 0 var(--Handle--width) var(--Handle--width)
          var(--Handle--width);

        background: var(--Editor--background);
        box-shadow: 0 0 0 0 black inset;

        white-space: nowrap;

        &.selected {
          box-shadow: 0 0 0 0.1em black inset;
        }

        /* animation: Edit-appear 0.2s linear forwards; */
      }
    }
  }
}

.AnnotationPoint {
  & > .label {
    border-radius: 1em;
    padding: 0 0.5em;
    background-color: black;

    display: flex;
    flex-direction: row;
    gap: 0.5em;

    font-size: 1em;
    cursor: pointer;
  }

  &:hover {
    & > .label {
      box-shadow: 0 0 0.5em 0.1em rgba(0, 0, 0, 0.2);
    }
  }
}

.Annotations {
  position: relative;
  width: 0;
  overflow: visible;

  display: none;

  & > .inner {
    /* padding: 2em 0; */
    padding-top: 2em;
    padding-bottom: 1em;

    display: flex;
    flex-direction: column;
    gap: 1em;

    & > .item {
      border-radius: 0.5em;
      padding: 0.5em;
      width: 20em;

      background: var(--Editor--background);
      box-shadow: 0 0 0.5em 0.1em rgba(0, 0, 0, 0.2);

      display: flex;
      flex-direction: column;
      gap: 0.5em;
    }

    & > .Info {
      border: 0.1em solid rgb(223, 197, 0);
    }

    & > .Error {
      border: 0.1em solid red;
    }
  }
}

.AnnotationPoint:hover + .Annotations {
  display: block;
  /* this allows the annotations to expand and push down the line below the annotated line */
  height: fit-content;
}

.AnnotationSep {
  width: 0.5em;
}

@keyframes Edit-appear {
  from {
    opacity: 0;
    transform: translateX(1em);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes Edit-selected {
  from {
    transform: translateX(-1em);
  }

  to {
    transform: translateX(0);
  }
}

@keyframes Buffer-appear {
  from {
    /* opacity: 0; */
    /* transform: translateY(-1em); */
  }

  to {
    /* opacity: 1; */
    /* transform: translateY(0); */
  }
}

@keyframes Buffer-query-passive {
  0% {
    box-shadow: 0 0 5px rgba(0, 255, 255, 0.7),
      0 0 8px rgba(0, 255, 255, 0.5) inset, 0 0 10px #00ffff;
  }

  25% {
    box-shadow: 0 0 10px rgba(255, 0, 255, 0.7),
      0 0 16px rgba(255, 0, 255, 0.5) inset, 0 0 20px #ff00ff;
  }

  50% {
    box-shadow: 0 0 5px rgba(255, 255, 0, 0.7),
      0 0 8px rgba(255, 255, 0, 0.5) inset, 0 0 10px #ffff00;
  }

  75% {
    box-shadow: 0 0 10px rgba(0, 255, 0, 0.7),
      0 0 16px rgba(0, 255, 0, 0.5) inset, 0 0 20px #00ff00;
  }

  100% {
    box-shadow: 0 0 5px rgba(0, 255, 255, 0.7),
      0 0 8px rgba(0, 255, 255, 0.5) inset, 0 0 10px #00ffff;
  }
}

@keyframes Hole-passive {
  0% {
    box-shadow: 0 0 5px rgba(0, 255, 255, 0.7),
      0 0 8px rgba(0, 255, 255, 0.5) inset, 0 0 10px #00ffff;
  }

  25% {
    box-shadow: 0 0 10px rgba(255, 0, 255, 0.7),
      0 0 16px rgba(255, 0, 255, 0.5) inset, 0 0 20px #ff00ff;
  }

  50% {
    box-shadow: 0 0 5px rgba(255, 255, 0, 0.7),
      0 0 8px rgba(255, 255, 0, 0.5) inset, 0 0 10px #ffff00;
  }

  75% {
    box-shadow: 0 0 10px rgba(0, 255, 0, 0.7),
      0 0 16px rgba(0, 255, 0, 0.5) inset, 0 0 20px #00ff00;
  }

  100% {
    box-shadow: 0 0 5px rgba(0, 255, 255, 0.7),
      0 0 8px rgba(0, 255, 255, 0.5) inset, 0 0 10px #00ffff;
  }
}

@keyframes Point-appear {
  0% {
    opacity: 0;
    transform: scaleY(1);
  }

  50% {
    opacity: 0.5;
    transform: scaleY(1.5);
  }

  100% {
    opacity: 1;
    transform: scaleY(1);
  }
}