@import '@/styles/responsive.scss';

.chatComponent {
  display: flex;
  gap: 10px;

  .messageBox {
    padding: 1rem;

    @include laptop {
      padding: 0.5rem;
    }
  }

  &[data-me-message='me-message'] {
    justify-content: flex-start;
    align-items: start;

    float: left;
    clear: both;

    .messageBox {
      box-shadow: 4px 6px 10px 0px rgba(56, 124, 68, 0.15);

      border: 1px solid rgba(56, 124, 68, 0.2);
      border-radius: 0px 40px 40px 40px;
      background: #fff;
      width: 100%;
      max-width: 60%;

      &::after {
        position: absolute;
        bottom: -40px;
        left: 0px;
        content: attr(data-time);
      }

      @include laptop {
        max-width: 80%;
        p {
          font-size: 14px;
        }
      }
    }
  }

  &[data-user-message='user-message'] {
    flex-direction: row-reverse;
    justify-content: flex-start;
    align-items: start;

    float: right;
    clear: both;

    .messageBox {
      border: 1px solid rgba(56, 124, 68, 0.2);
      border-radius: 40px 0px 40px 40px;
      border-radius: 0px 40px 40px 40px;
      background: #30713a;

      width: 100%;
      max-width: 60%;

      &::after {
        position: absolute;
        bottom: -40px;
        left: 0px;
        content: attr(data-time);
      }

      p {
        color: #fff;
      }

      @include laptop {
        max-width: 80%;
        p {
          font-size: 14px;
        }
      }
    }
  }
}