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

.audio-message {
  padding: 10px 12px;

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

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

  &__content {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
  }

  &__play-btn {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background-color: #4080ff;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;

    &:hover {
      background-color: #3070ee;
    }

    &--playing {
      svg {
        margin-left: 0;
      }
    }
  }

  &__duration {
    flex-shrink: 0;
    font-size: 14px;
    min-width: 36px;

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