@use "../colors" as c

.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: 32px
    width: $size
    height: $size
    border-radius: 50%
    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

.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