.datasette-comments * {
  box-sizing: border-box;
}
.datasette-comments button {
  cursor: pointer;
}
.datasette-comments button:disabled {
  cursor: initial;
}

.datasette-comments-thread {
  background: white;
  box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
  border-radius: 1rem;
  margin: 0px;
  padding: 0.5rem;
  width: 360px;
  max-height: 100vh;
  overflow-y: auto;
}

.datasette-comments-thread-comments .datasette-comments-comment {
  border-bottom: 1px solid #ededed;
}
.datasette-comments-thread-comments .datasette-comments-comment:last-child {
  border-bottom: none;
}

/* META topbar */
.datasette-comments-thread-meta {
  display: flex;
  justify-content: end;

  & button {
    background: none;
    border: none;
    cursor: pointer;

    & svg:hover {
      fill: red;
    }
  }
}

/* COMMENTS*/
.datasette-comments-comment {
  padding-top: 0.5rem;
  padding-bottom: 1rem;
  padding-right: 1rem;
  padding-left: 4px;

  & .tag a {
    text-decoration: none;
    font-weight: 600;
  }
  & .mention a {
    text-decoration: none;
    font-weight: 600;
  }
}

/* DRAFTS */
.datasette-comments-draft {
  & img {
    border-radius: 50%;
  }

  & textarea {
    flex: 1 1 auto;
    border: none;
    border-radius: 6px;
    background: #ececec;
    padding: 4px;
    resize: none;
  }

  & .draft-cancel-button {
    background: #d9d9d9;
  }
  & .draft-add-button {
    background: #276890;
    color: #d9d9d9;
    margin-left: 0.5rem;

    &:disabled {
      background: #888;
    }
  }

  & .draft-bottom-drawer {
    padding: 0.5rem 0;
    display: flex;

    & div {
      margin-left: auto;
    }

    & button {
      border: none;
      border-radius: 4px;
      padding: 3px 6px;
    }
  }
}

/* REACTIONS */
.datasette-comments-reactions {
  display: flex;
  align-items: center;
  grid-gap: 4px;

  & .popup {
    position: absolute;
    background: white;
    top: -20px;
    left: 4px;
    color: white;
    width: 320px;
  }

  & .other-reactions {
    border: 1px solid #d0d7de;
    color: #646464;
    &.viewer-reacted {
      border: 1px solid #0969da;
      color: #0969da;
      background: #ddf4ff;
    }
  }

  & button {
    cursor: pointer;
    background: none;
    border: 1px solid #999;
    border-radius: 1rem;
  }

  & .datasette-comments-add-reaction {
    cursor: pointer;
    display: inline;
    border: none;
    padding: 0;
    background: #dedede;
    border-radius: 50%;
    width: 26px;
    height: 26px;

    & svg {
      margin-top: 2px;
      width: 20px;
      height: 20px;
    }
  }
}

.xxx svg {
  display: none;
}
.xxx:hover svg {
  display: block;
}
