@use "@tencentcloud/uikit-base-component-react/dist/styles/theme/util" as *;

.message-meta {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  height: 20px;

  @include theme() {
    color: get(text-color-tertiary);
  }

  &__time {
    line-height: 1;
  }

  &__status-icon {
    @include theme() {
      color: get(text-color-link);
    }

    &--failed {
      @include theme() {
        color: get(text-color-error);
      }
    }

    &--unSend {
      animation: rotate-infinite 1s linear infinite;
    }

    &--delivered {
      position: relative;

      &__first {
        @include theme() {
          color: get(text-color-link);
        }
      }

      &__second {
        position: absolute;
        top: 0;
        left: 0;
        transform: translateX(40%);

        @include theme() {
          color: get(text-color-disabled);
        }
      }
    }

    &--clickable {
      cursor: pointer;
      position: relative;

      &:hover {
        opacity: 0.8;
      }

      &:active {
        opacity: 0.6;
      }
    }
  }
}

@keyframes rotate-infinite {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}