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

$layout-row-gap: 8px;
$layout-column-gap: 4px;
$avatar-size: 32px;

.message-layout {
  display: flex;
  position: relative;
  gap: $layout-row-gap;

  &--left {
    flex-direction: row;
  }

  &--right {
    flex-direction: row-reverse;
  }

  &--mobile {
    -webkit-tap-highlight-color: transparent;
  }

  &__content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: $layout-column-gap;
    min-width: 0;

    &--right {
      align-items: flex-end;
    }

    &--left {
      align-items: flex-start;
    }
  }

  &__header {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    max-width: 75%;

    &--right {
      flex-direction: row-reverse;
    }
  }

  &__body {
    display: flex;
    align-items: flex-end;
    width: 100%;
    gap: 4px;
    max-width: 90%;

    @media (width >= 768px) {
      max-width: 80%;
    }

    @media (width >= 1024px) {
      max-width: 70%;
    }

    &--left {
      flex-direction: row;
    }

    &--right {
      flex-direction: row-reverse;
    }
  }

  &__avatar {
    flex-shrink: 0;
  }

  &__nick {
    flex: 1;
    font-size: 12px;
    @include mixin.text-ellipsis;

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

  &__time {
    font-size: 12px;
    flex-shrink: 0;
    white-space: nowrap;

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

  &__bubble {
    position: relative;
  }

  &__status {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: stretch;
    flex-shrink: 0;
    font-size: 12px;

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

  &__send-status {
    margin: auto 0;
  }

  &__read-receipt {
    margin-top: auto;
  }

  &__read-status,
  &__group-all-read {
    font-size: 12px;
    white-space: nowrap;

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

  &__group-unread {
    font-size: 12px;
    white-space: nowrap;
    cursor: pointer;

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

    &:hover {
      text-decoration: underline;
    }
  }

  &__menu-icon {
    cursor: pointer;
    border-radius: 4px;
    padding: 2px 6px;

    @include light() {
      color: get(text-color-primary);
      background-color: get(bg-color-topbar);

      &:hover {
        background-color: #f0f7ff;
      }
    }

    @include dark() {
      color: get(text-color-primary);

      &:hover {
        background-color: #353535;
      }
    }
  }

  &__reactions {
    display: none;
  }

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

  &__recalled {
    text-align: center;
  }
}

.message-layout--mobile {
  .message-layout__bubble {
    touch-action: pan-y;
  }
}

.highlight--normal {
  animation: background-highlight 1s ease-in-out infinite;
}

@keyframes background-highlight {
  50% {
    background-color: rgb(255, 199, 126);
  }
}