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

.file-message {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 2px;
  gap: 12px;
  padding: 12px;
  cursor: pointer;
  transition: background-color 0.2s ease;

  &--self {
    @include bubble.bubble-base-self();
  }

  &--other {
    @include bubble.bubble-base-other();
  }

  &__download {
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.2s ease;
  }

  &:hover {
    .file-message__download {
      opacity: 1;
    }
  }

  &__icon {
    flex-shrink: 0;
  }

  &__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  &__name {
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;

    @include text.text-ellipsis;
  }

  &__size {
    font-size: 12px;

    @include text.text-ellipsis;
  }
}