@import "../../assets/scss/variables.scss";
@import "../../assets/scss/mixins/layout";
@import "../../assets/scss/mixins/button";

.tfw-grid-message {
  font-family: "Roboto";
  font-style: normal;
  display: grid;
  grid-template-rows: 1fr auto;
  grid-row-gap: $nano;
  width: 100%;
  padding: $hair;
  border-radius: $tao-panel-border-radius-sm;
  font-size: $font-size-base;
  margin-bottom: $hair;

  animation-name: inflate;
  animation-duration: 0.5s;
  animation-timing-function: cubic-bezier(0.01, 0.1, 0, 1);
  color: white;
  background-color: $tao-card-color;

  .tfw-message-btn-divider {
    opacity: 0.25;
    border: 1px solid $tao-gray-color;
  }
  .tfw-message-btn {
    color: $tao-btn-font-color;
    padding-top: $tiny;
    padding-bottom: $hair;
    display: flex;
    align-items: center;
    text-align: center;

    .no {
      @include set-button-style($tao-red-color, $tao-shadow-red-color);
      width: $xlarge;
    }

    .yes {
      @include set-button-style($tao-green-color, $tao-shadow-green-color);
      width: $xlarge;
    }

    .solution {
      @include set-button-style(white, $tao-shadow-color);
      width: $xlarge + $medium + $tiny;
    }

    .hint {
      @include set-button-style($tao-blue-color, $tao-shadow-blue-color);
      width: $xlarge;
    }

    .fix {
      @include set-button-style($tao-yellow-color, $tao-shadow-yellow-color);
      width: $xlarge + $medium + $tiny;
    }

    .next {
      @include set-button-style($tao-blue-color, $tao-shadow-blue-color);
      width: $xlarge;
    }
  }
}

.highlighted-message {
  // box-shadow: 0px 0px 8px 0px $tao-blue-color;
  border: 3px single $tao-blue-color;

}

@keyframes inflate {
  0%   { transform: scale(0,0); }
  100% { transform: scale(1,1); }
}

.jumping-circle-container {
  display: flex;
  padding-top: 1.3em;
  padding-bottom: 1em;
}

.jumping-circle {
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background-color: gray;
  margin-top: 0.3em;
  margin-left: 0.3em;

  animation-name: float;
  animation-duration: 1.7s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

#jc2 { animation-delay: 0.2s; }
#jc3 { animation-delay: 0.45s; }

@keyframes float {
  0% { transform: translateY(0em); }
  30% { transform: translateY(-0.5em); }
  60% { transform: translateY(0.2em); }
  80% { transform: translateY(0em); }
  90% { transform: translateY(-0.5em); }
  100% { transform: translateY(0em); }
}

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

  .originator {
    font-style: normal;
    font-weight: bold;
    font-size: $font-size-base;
    line-height: 26px;

    display: flex;
    align-items: center;
    color: $tao-message-originator-color;
  }

  .timestamp {
    font-size: $font-size-base;
    color: $tao-gray-color;
    opacity: 0.37;
  }
}

.tfw-grid-message-body {
  @include word-break();
  line-height: 26px;

  & p {
    margin-bottom: $tiny !important;
  }
}