:root {
  --comment-grey: #eee;
}

.comments {
  width: 100vw;
  translate: -1rem;
  background: var(--comment-grey);

  li {
    position: relative;
    scroll-margin-top: 4rem;
    padding: 2rem 1rem;
    &:not(:last-of-type) {
      border-bottom: 2px solid #ccc;
    }

    > p {
      font-size: 4rem;
      position: absolute;
      top: -0.25rem;
      left: -0.25rem;
      opacity: 0.5;
    }
  }

  pre {
    position: relative;
    background: rgb(255 255 255 / 0.8);
    padding: 2rem 1rem;
    white-space: pre-wrap;
    font-size: 17px;
    margin-bottom: 1rem;
    border-radius: 0.5rem;
    line-height: 1.6;
  }

  div {
    display: flex;
    align-items: center;
    gap: 1rem;

    time {
      font-size: 0.875rem;
      margin-right: auto;
      letter-spacing: -0.05rem;
    }

    button {
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    button {
      transition-property: translate, filter, opacity;
      &.disabled {
        pointer-events: none;
        opacity: 0.6;
        cursor: default;
        filter: none;
      }
    }

    p {
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }
  }

  strong {
    display: grid;
    place-content: center;
    font-size: 1.25rem;
    background: conic-gradient(
      from -90deg at -5% center,
      #f9cc45,
      rgb(255, 132, 91),
      var(--red),
      #ff9054
    );
    border-radius: 50%;
    box-shadow:
      0 0.1rem 0.2rem rgb(0 0 0 / 0.6),
      0 0.2rem 0.7rem rgb(0 0 0 / 0.2);

    img {
      width: 3rem;
      height: 3rem;
      filter: drop-shadow(0 0 0 white);
    }
  }

  p strong {
    background: rgb(108, 202, 255);
    box-shadow: none;

    img {
      filter: none;
    }
  }
}

@media (min-width: 744px) {
  .comments {
    width: auto;
    translate: 0;
    border-radius: 0.25rem;
  }
}