$message-time-color: blue;
$speech-bubble-border-color: none;

$primary-color: #e6f7ff;
$accent-color: #ffff;

$contrasted-primary-text: black;
$contrasted-accent-text: #111; 

$primary-dark: darken($primary-color, 8%);

.Message {
  .message-row {
    display: grid;
    grid-template-columns: 70%;
    margin-bottom: 20px;

    > .message-content {
      display: grid;

      .img-container {
        width: 40px;
        height: 40px;
        position: relative;
  
        img {
          height: 100%;
          width: 100%;
          border-radius: 50%;
        }
  
        .img-container-status-circle {
          width: 15px;
          height: 15px;
          border-radius: 50%;
          background: #00e676;
          border: 3px solid white;
          bottom: 0;
          right: 0;
          position: absolute;
        }
      }
      > .message-text {
        padding: 9px 14px;
        font-size: 16px;
        margin-bottom: 5px;
      }
    }

    &.you-message {
      justify-content: end;

      > .message-content {
        justify-items: end;

        > .message-container {
          background: $primary-color;
          color: $contrasted-primary-text;
          border: 1px solid $primary-color;
          border-radius: 0px 6px 6px 6px;
          padding: 8px 16px;

        }
      }
    }

    &.other-message {
      justify-items: start;

      > .message-content {
        grid-template-columns: 48px 1fr;
        grid-column-gap: 15px;

        > .message-container {
          background: $accent-color;
          color: $contrasted-accent-text;
          border: 1px solid $speech-bubble-border-color;
          border-radius: 0px 6px 6px 6px;
          padding: 8px 16px;
        }
      }
    }
  }

  .message-container {
    display: flex;
    flex-direction: column;
    .message-title {
      span:first-of-type {
        font-family: Inter;
        font-style: normal;
        font-weight: 500;
        font-size: 12px;
        line-height: 20px;
        color: #000000;
        padding-right: 6px;
      }
      span:nth-of-type(2) {
        font-family: Inter;
        font-style: normal;
        font-weight: normal;
        font-size: 12px;
        line-height: 20px;
        color: #595959;
      }
    }

    .message-body {
      font-family: Inter;
      font-style: normal;
      font-weight: normal;
      font-size: 16px;
      line-height: 24px;
      color: #262626;
    }

    

  }
}


@media (max-width: 768px) {
  
.Message {
  .message-row {

    > .message-content {
      .img-container {
  
        img {
          display: none;
        }
  
        .img-container-status-circle {
          display: none;
        }
      }
    }

    &.you-message {

      > .message-content {

        > .message-container {
          background: $primary-color;
          color: $contrasted-primary-text;
        }
      }
    }

    &.other-message {
      > .message-content {
        grid-template-columns: 0px 1fr;

        > .message-container {
          background: #F0F0F0;
          color: #595959;
        }
      }
    }
  }
}
}