@import "../../assets/scss/variables.scss";

.tfw-messages-main {


  .tfw-grid-messages-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-bottom: $small;


    span {
      color: $tao-blue-500;
      font-weight: 500;
      font-size: $font-size-h3;
    }
  }

}

.tfw-grid-message {
  display: grid;
  grid-template-rows: 1fr auto;
  grid-row-gap: $hair;
  width: 100%;

  background-color: $tao-gray-100;
  border-radius: $tao-panel-border-radius-sm;
  padding: $tiny;
  font-size: $font-size-base;
  margin-bottom: $hair;
}

.tfw-grid-message-header {
  display: grid;
  grid-template-columns: 1fr 5fr 8fr;
  grid-column-gap: 4px;
  width: 100%;

  img {
    width: 12px;
  }

  .originator {
    font-weight: 500;
  }

  .timestamp {
    font-size: $font-size-tiny;
    opacity: 0.37;
  }

}