@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: flex

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

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

    &--no-icon
      background-color: #48d

  &__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

  &--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

.c-message-event
  padding-top: 10px
  padding-left: 6px

  &__inner
    display: flex
    align-items: center

  &__icon
    margin-right: 8px
    position: relative
    top: 1px

.c-message-notice
  padding: 12px

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