sparkletown/sparkle

@import "scss/constants.scss";

$emoji-button-diameter: $submit-button-diameter - $spacing--md;
$jukebox-chat-max-height: 150px;

.Jukebox {
  &__container {
    width: 100%;
    height: 35%;
    margin: $spacing--lg;
    z-index: z(jukebox-content);
  }

  &__chat {
    overflow-y: scroll;
    display: flex;
    flex-direction: column;
    max-height: $jukebox-chat-max-height;
    background-color: opaque-white(0.12);
    padding: $spacing--sm $spacing--md;
    height: 100%;
    width: 100%;
    border-top-left-radius: $border-radius--xl;
    border-top-right-radius: $border-radius--xl;

    &-messages {
      padding: $spacing--xs $spacing--md;

      &--info {
        padding: $spacing--xs $spacing--md;
        opacity: 0.6;
      }
    }

    &-author {
      font-weight: $font-weight--700;
      cursor: pointer;
    }
  }

  &--question {
    background-color: $dark-green;
  }

  &__form {
    padding: $spacing--md 0;
    display: flex;
  }

  &__inputs {
    display: flex;
    align-items: center;
    place-content: center;
    flex-grow: 1;
    margin-right: $spacing--lg;
  }

  &__input-container {
    flex-grow: 1;
    display: flex;

    & .InputField__wrapper {
      width: 100%;
      margin: auto;
    }
  }

  &__input {
    padding-right: $submit-button-diameter;
    // NOTE: this removes screen artefacts of the embedded <input> inside InputField being as wide as the parent
    height: $spacing--lg * 2;
  }

  &__buttons {
    display: flex;
    flex-grow: 0;

    &-submit {
      width: $spacing--lg * 4;
      height: $spacing--lg * 2;
    }

    & .ButtonNG__button {
      background: url("/assets/icons/arrow-send-msg.svg") no-repeat center
        opaque-white(0.1);

      &:hover {
        background: url("/assets/icons/arrow-send-msg.svg") no-repeat center
          opaque-white(0.2);
        cursor: pointer;
      }
    }

    & .Jukebox__buttons-submit--active {
      background-color: $accent--under;

      &:hover {
        background-color: $primary--live-hover;
        cursor: pointer;
      }
    }
  }

  &__input {
    text-align: left;
    padding-left: $spacing--lg;
  }
}