cinny/src/app/molecules/message/TimelineChange.scss

@use '../../partials/dir';

.timeline-change {
  padding: var(--sp-ultra-tight);
  @include dir.side(padding, var(--sp-normal), var(--sp-extra-tight));

  display: flex;
  align-items: center;
  width: 100%;

  &:hover {
    background-color: var(--bg-surface-hover);
  }

  &__avatar-container {
    width: var(--av-small);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    opacity: 0.38;
    .ic-raw {
      background-color: var(--tc-surface-low);
    }
  }

  & .text {
    color: var(--tc-surface-low);
  }

  &__content {
    flex: 1;
    min-width: 0;

    margin: 0 var(--sp-tight);
    word-break: break-word;
  }
}