//Contains all styles not unique to a svelte component.

//ConsoleGlobalMessage
div.console-global-message.nes-container {
  pointer-events: auto;
  margin-left: auto;
  margin-right: auto;
  top: 20vh;
  width: 50vw;
  height: 50vh;
  padding: 0;
  background-color: #333333;

  .console-global-message-main {
    width: 100%;
    height: 100%;

    h2 {
      margin-bottom: 20px;
      text-align: center;
      color: white;
    }

    .console-global-message-close {
      position: absolute;
      right: 0;
      top: 0;
    }
  }

  div.console-global-message-content {
    display: flex;
    flex-flow: row;
    height: calc(100% - (36px + 20px));
    width: 100%;
  }

  div.console-global-message-menu {
    flex: 0 1 auto;

      button {
        margin: 7px;
    }
  }

  .console-global-message-main-input {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 95%;
    margin-left: 10px;
    margin-right: 10px;

    .footer-btn-action {
      width: 100%;
      margin: 10px;
      text-align: center;
    }
  }


//InputTextGlobalMessage
  .section-input-send-text {
    flex: 1 1 auto;
    display: flex;
    flex-flow: column;
    height: 100%;

    .ql-toolbar{
      flex: 0 1 auto;
      background: white;
    }

    .input-send-text{
      flex: 1 1 auto;
      max-height: calc(100% - 55px);
      color: white;
      font-size: 1rem;

      .ql-editor.ql-blank::before {
        color: white;
        font-size: 1rem;
      }
    }
  }


//UploadAudioGlobalMessage
 .section-input-send-audio {
   flex: 1 1 auto;
   display: flex;
   flex-flow: column;
   height: 100%;

   img {
     flex: 1 1 auto;
     height: 60%;
     margin-bottom: 10px;
     cursor: url('images/cursor_pointer.png'), pointer;
   }

   label {
     flex: 0 1 auto;
     color: white;
     font-size: 1rem;
     text-align: center;
   }

   p.err {
     flex: 0 1 auto;
     color: #ce372b;
     font-size: 1rem;
     text-align: center;
   }
 }

  #input-send-audio {
    display: none;
  }
}