.module-message {
  padding: 0 12px;

  &-time {
    @include flex($justify: center, $align: center);
    padding: 16px 0;
    font-weight: 400;

    @include light-theme() {
      color: #293146;
    }

    @include dark-theme() {
      color: $color-gray-05;
    }

    // &::before,
    // &::after {
    //   content: '';
    //   width: 20%;
    //   height: 1px;

    //   @include light-theme() {
    //     background-color: #f5f5f5;
    //   }

    //   @include dark-theme() {
    //     background-color: $color-gray-45;
    //   }
    // }

    // &::before {
    //   margin-right: 8px;
    // }

    // &::after {
    //   margin-left: 8px;
    // }
  }

  &-container {
    position: relative;
    width: fit-content;
    max-width: 60%;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 14px;
    line-height: 24px;
    color: #54556c;
    // background-color: #e9e9e9;
    box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.1);
    user-select: text;

    @include light-theme() {
      color: #54556c;
      background-color: $color-gray-05;
    }

    @include dark-theme() {
      color: $color-gray-05;
      background-color: $color-gray-75;
    }

    &::before {
      content: '';
      position: absolute;
      top: 14px;
      border: 6px solid transparent;
    }
  }

  &__left {
    @include flex();

    .module-message-container {
      &::before {
        right: 100%;

        @include light-theme() {
          border-right-color: $color-gray-05;
        }

        @include dark-theme() {
          border-right-color: $color-gray-75;
        }
      }
    }
  }

  &__right {
    @include flex($justify: flex-end);

    .module-message-container {
      &::before {
        left: 100%;

        @include light-theme() {
          border-left-color: $color-gray-05;
        }

        @include dark-theme() {
          border-left-color: $color-gray-75;
        }
      }
    }
  }
}
