@use '../../abstracts/variables' as *;

// -----------------------------------------------------------------------------
// Listen & Repeat: listen and repeat speaking activity
// Template: templates/listenrepeat.mustache
// -----------------------------------------------------------------------------

.minilesson_landr_player_box {

  .landr_ctrl-btn {
    background-color: $primary;
    border-color: $primary;
    border-radius: 8px;
    outline: 0;
    box-shadow: $main-shadow;
    color: $white;

    &:hover,
    &:focus,
    &:active {
      background-color: $primary;
      border-color: $primary;
      border-radius: 8px;
      outline: 0;
      box-shadow: $main-shadow;
      color: $white;
    }
  }

  .landr_prompt_container {
    margin: auto;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    border-radius: 0.5rem;
    background-color: $grey-50;
    max-width: 600px;
    box-shadow: 0 2px 4px rgba($black, 0.05);
  }

  .landr_reply_container {
    margin: auto;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 1rem;
    padding: 0.75rem;
    max-width: 600px;
    background-color: $grey-50;
  }

  .minilesson_sentence_image {
    margin-bottom: 8px;
  }

  .landr_reply {
    margin-top: 10px;
    position: relative;
  }

  .landr_game {
    min-height: 250px;
    padding: 10px;
  }

  .landr_speech {
    position: relative;
    font-family: arial;
    font-size: 16px;
    background: $error-bubble;
    color: $black;
    border-radius: 10px;
    padding: 20px;
  }

  .landr_right {
    background-color: $white;

    &:after {
      content: '';
      border: 20px solid transparent;
      border-left-color: $white;
      border-right: 0;
      position: absolute;
      right: -20px;
      top: 50%;
      margin-top: -20px;
    }
  }

  .landr_teacher_left {
    background-color: $bubble-green;

    &:after {
      content: '';
      border: 20px solid transparent;
      border-right-color: $bubble-green;
      border-left: 0;
      position: absolute;
      left: -20px;
      top: 50%;
      margin-top: -20px;
    }
  }

  .landr_speech-icon-left {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    font-size: 50px !important;
    height: 50px;
  }

  .landr_speech-icon-right {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    font-size: 50px !important;
    height: 50px;
  }

  .landr_controls {
    background-color: $white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }

  .landr_skip_btn {
    border: 1px;
    border-style: solid;
    border-color: $primary;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 500;
    margin: auto;
    background-color: $white;
    color: $primary;

    &:hover,
    &:active,
    &:focus {
      border: 1px;
      border-style: solid;
      border-color: $primary;
      border-radius: 10px;
      font-size: 15px;
      font-weight: 500;
      margin: auto;
      background-color: $white;
      color: $primary;
    }
  }

  .landr_speakbtncontainer {
    height: 75px;
    text-align: center;
    display: none;
  }

  .landr_results {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 75px;
    font-weight: bold;
    color: $white;
    text-align: center;
    z-index: 999;
  }

  .landr_correct,
  .landr_correct.landr_word_input:disabled {
    background-color: lightgreen;
  }

  .landr_incorrect,
  .landr_incorrect.landr_word_input:disabled {
    background-color: lightpink;
  }

  .landr_targetWord {
    padding: 3px;
    border-radius: 5px;
    margin: 5px;
  }

  .landr_feedback {
    font-size: 14px !important;
    padding: 10px;
  }

  .landr_loaded {
    text-align: center;
  }
}

// Elements outside player box
.landr_listen_cont {
  text-align: center;
}

.landr_icon {
  font-size: 1.5rem;
  color: $player-blue;
}

.landr_speech_text {
  font-size: 1.3rem;
  color: $grey-900;
}

.landr_speech_inputs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  background-color: $grey-200;
  padding: 0.75rem;
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px rgba($black, 0.1);
  flex-grow: 1;
  font-size: 1rem;
  color: $grey-900;
  align-items: self-end;
}

.landr_word_input {
  padding: 0.3rem 0.5rem;
  font-size: 1rem;
  width: auto;
  min-width: 40px;
  border: 1px solid $grey-500;
  border-radius: 4px;
  background-color: $white;

  &:disabled {
    background-color: $grey-50;
    color: $grey-700;
  }
}

.landr_feedback_icon {
  font-size: 0.9rem;
  color: $grey-600;
}

// Responsive
@media (max-width: 480px) {
  .landr_skip_btn .mobileaccesshide {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}
