@use "../colors" as c

.c-read-marker
  display: none
  position: relative

  &--attached
    display: block

  &__inner
    position: absolute
    left: -64px
    right: 0px
    height: 2px
    top: 0px
    background-color: c.$notify-highlight

    @at-root .c-message:last-child &
      top: 11px

    @at-root .c-message-event &
      top: 7px

  &__text
    position: absolute
    right: -14px
    top: -9px
    display: flex
    align-items: center
    background-color: c.$notify-highlight
    color: #000
    font-size: 12px
    font-weight: 600
    line-height: 1
    padding: 4px
    border-radius: 5px
    text-transform: uppercase

  &__loading
    background-color: #000
    width: 10px
    height: 10px