@use "../colors" as c

.c-event-groups > *
  overflow-anchor: none

.c-message-group, .c-message-event
  margin-top: 12px
  padding-top: 12px
  border-top: 1px solid c.$divider

.c-message-group
  display: grid
  grid-template-columns: auto 1fr

  &__avatar
    flex-shrink: 0
    margin-right: 16px
    cursor: pointer

  &__icon
    $size: 40px
    width: $size
    height: $size
    border-radius: 50%

    &--no-icon
      background-color: #bbb

  &__intro
    display: flex
    align-items: baseline

  &__name
    color: #5bf
    margin: -2px 0px -3px
    font-size: 19px
    font-weight: 500
    cursor: pointer

    &:hover
      text-decoration: underline

  &__date
    font-size: 14px
    margin-left: 9px
    color: c.$muted

.c-message
  margin-top: 4px
  overflow-wrap: anywhere
  opacity: 1
  transition: opacity 0.2s ease-out

  &--plain
    white-space: pre-wrap

  &--media
    // fix whitespace
    font-size: 0
    margin-top: 8px

  &--pending
    opacity: 0.5

  &__edited
    margin-left: 4px
    padding: 1px 3px 1px 2px
    font-size: 12px
    font-style: italic
    line-height: 1
    color: c.$muted
    cursor: default
    border-radius: 4px
    transition: background-color 0.15s ease-out

    &:hover
      background-color: c.$darker

  &__image
    width: auto
    height: auto
    max-width: 400px
    max-height: 300px

  // message formatting rules

  code, pre
    border-radius: 4px
    font-size: 0.9em

  pre
    background-color: c.$darkest
    padding: 8px
    border: 1px solid c.$divider
    white-space: pre-wrap

  code
    background-color: c.$darker
    padding: 2px 4px

  a
    color: c.$link

  blockquote
    margin-left: 8px
    border-left: 4px solid c.$muted
    padding: 2px 0px 2px 12px

  p, pre, blockquote
    margin: 16px 0px

    &:first-child
      margin-top: 0px

    &:last-child
      margin-bottom: 0px

.c-message-event
  // closer spacing than normal messages
  padding-top: 2px
  padding-left: 6px
  margin-bottom: -4px
  line-height: 1.2

  &__inner
    text-indent: -36px
    margin-left: 36px

  img
    // let me know if there's a smarter way to line this shit up
    position: relative
    top: -5px
    transform: translateY(50%)

  &__icon
    margin-right: 8px

  &__avatar
    width: 16px
    height: 16px
    border-radius: 50%
    margin: 0px 6px

.c-message-notice
  padding: 12px

  &__inner
    text-align: center
    padding: 12px
    background-color: c.$milder
    border-radius: 8px