#guestbookForm {
  #parent_id {
  }
  #name {
  }
  #neocities {
  }
  #email {
  }
  #avatar_url {
  }
  #mood {
  }
  #comment_content {
  }
  #submitBtn {
  }

  #cancelReplyBtn {
    display: none;
    &.visible {
      display: block;
    }
  }

  #formStatus {
    display: none;
    &.visible {
      display: block;
    }
  }
}

#sortToggleBtn {
}

#commentsContainer {
  --flex-direction: row-reverse;
  display: flex;
  flex-direction: var(--flex-direction);
  flex-wrap: wrap;

  justify-content: space-around;
  align-items: flex-start;
}

.comment-card {
  --parent-index: sibling-index();
  --parent-count: sibling-count();

  --phase-offset: calc(var(--parent-index) * 73deg);
  --base-z: calc(40px + (var(--parent-index) * 15px));
  --anim-duration: calc(4s + (var(--parent-index) / var(--parent-count)) * 3s);

  --max-width: calc(var(--main-width) / 2.15);
  width: fit-content;
  max-width: var(--max-width);

  button {
    background-color: transparent;
    border: none;
  }

  > .comment-wrapper {
    background-color: bisque;
    outline: dashed magenta 1px;

    width: fit-content;
    padding: 1em;

    display: grid;
    grid-template-areas: var(
      --comment-grid-template,
      "AVATAR HEADER" "AVATAR CONTENT" "FOOTER FOOTER"
    );

    > .comment-aside.avatar {
      --avatar-size: 4em;
      display: var(--avatar-display, none);

      grid-area: AVATAR;

      background-image: var(--avatar-url, none);
      background-size: cover;
      background-position: center;

      width: var(--avatar-size);
      height: var(--avatar-size);

      border: 0.25em solid rgb(223, 174, 129);
    }

    > .comment-header {
      display: flex;
      flex-flow: row wrap;
      align-content: center;
      align-items: center;
      justify-content: space-around;

      grid-area: HEADER;

      > .comment-hgroup {
        display: flex;
        flex-flow: column nowrap;
        margin-inline-end: auto;

        > .name {
        }
        > .mood {
        }
      }

      > .date {
        font-size: 0.75em;
      }
    }

    > .comment-main {
      grid-area: CONTENT;

      > .content {
      }
    }

    > .comment-footer {
      grid-area: FOOTER;

      display: flex;
      flex-flow: row nowrap;
      flex-wrap: nowrap;
      justify-content: flex-end;
      align-items: center;

      position: relative;

      > .comment-address.neocities {
        --deg-skew: 3deg;
        --deg-rotate: 2deg;
        --domen-px: 45px;

        position: absolute;
        inset-inline-start: -15%;
        inset-block-end: -5%;

        background-color: crimson;

        padding: 2.5%;

        perspective: 800px;
        transform-style: preserve-3d;
        transform: skewX(var(--deg-skew)) rotateZ(var(--deg-rotate));

        .neocities-span-group {
          --domen-val: calc(
            (var(--deg-rotate) * -1) +
              (
                sin(var(--neocities-domen-animation) + var(--phase-offset)) *
                  3deg
              )
          );

          display: inline-flex;
          flex-flow: row nowrap;

          animation: neocities-domen var(--anim-duration) infinite linear;
          transform: translateZ(
              calc(
                var(--base-z) +
                  (
                    sin(
                        var(--neocities-domen-animation) + var(--phase-offset)
                      ) *
                      var(--domen-px)
                  )
              )
            )
            skewX(calc(var(--deg-skew) * -1)) rotateZ(var(--domen-val));

          .comment-favicon {
            display: block;
          }
          .neocities-domain-span {
            padding-inline-start: 0.25em;
          }
        }
      }

      > .reactions {
        display: flex;
        flex-flow: row wrap;

        .reaction-btn {
          font-size: 24px;
          cursor: pointer;

          width: 2em;
          height: 2em;
          aspect-ratio: 1 / 1;

          display: flex;
          flex-flow: row nowrap;
          align-items: center;

          &.reacted {
          }
          &.syncing {
            pointer-events: none;
          }

          .reaction-img {
            height: 100%;
          }

          .reaction-count {
          }
        }

        .add-reaction-btn {
          margin-inline-start: 1em;
          cursor: pointer;

          .add-reaction-icon {
          }
        }

        .reactions-picker {
          --reaction-clr: #c2ec74;
          --reaction-clr-border: oklch(
            from var(--reaction-clr) calc(l + 0.05) c h
          );

          display: none;
          position: absolute;
          bottom: 100%;
          z-index: 999;

          width: calc(var(--main-width) / 3);

          background-color: rgb(from var(--reaction-clr) r g b / 0.5);
          border: 2px solid var(--reaction-clr);
          box-shadow: 0px 0px 5px 3px var(--reaction-clr-border);

          &.open {
            display: flex;
            flex-flow: row wrap;
            align-items: center;
            justify-content: center;
            align-content: center;
          }

          .picker-btn {
            cursor: pointer;
            width: max(calc(100% / sibling-count()), 75px);

            .picker-img {
              width: 98%;
              filter: drop-shadow(0px 0px 3px var(--reaction-clr-border));
            }
          }
        }
      }

      > .reply {
        cursor: pointer;
      }
    }
  }

  > .replies-container {
    display: flex;
    flex-direction: var(--flex-direction);

    flex-wrap: wrap;
    justify-content: space-around;
    align-items: flex-start;

    .reply-card {
      margin-left: calc(var(--indent, 0) * 0px);
    }
  }
}

@property --neocities-domen-animation {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}

@keyframes neocities-domen {
  from {
    --neocities-domen-animation: 0deg;
  }
  to {
    --neocities-domen-animation: 360deg;
  }
}

/*----*/
@property --parent-index {
  syntax: "<integer>";
  inherits: true;
  initial-value: 0;
}
@property --parent-count {
  syntax: "<integer>";
  inherits: true;
  initial-value: 0;
}