{"version":3,"sources":["Chatroom.scss"],"names":[],"mappings":"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","file":"Chatroom.css","sourceRoot":"../src","sourcesContent":["$backgroundColor: rgba(200, 200, 200, 0.9);\n$chromeColor: rgba(52, 61, 78, 1);\n$chromeColor2: white;\n$chromeColor3: grey;\n$bubbleColor: rgba(255, 255, 255, 0.8);\n$textColor: rgba(52, 61, 78, 1);\n$linkColor: #3498db;\n\n.chatroom {\n  width: 100%;\n  height: 600px;\n  color: $textColor;\n  max-height: 90vh;\n  background-color: $backgroundColor;\n  border-radius: 3px;\n  border-bottom-left-radius: 0;\n  border-bottom-right-radius: 0;\n  letter-spacing: normal;\n  overflow: hidden;\n  box-sizing: border-box;\n  box-shadow: 0 0 0 2px rgba(white, 0.8);\n\n  * {\n    box-sizing: border-box;\n  }\n\n  &.closed {\n    height: 40px;\n  }\n\n  h3 {\n    background-color: $chromeColor;\n    color: #fff;\n    margin: 0;\n    height: 40px;\n    font-weight: 600;\n    font-size: 18px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n  }\n\n  .chats {\n    box-sizing: border-box;\n    padding: 20px;\n    margin: 0;\n    height: calc(100% - 80px);\n    overflow-y: scroll;\n    -webkit-overflow-scrolling: touch;\n\n    .chat {\n      background: $bubbleColor;\n      position: relative;\n      padding: 5px 13px;\n      font-size: 14px;\n      border-radius: 10px;\n      list-style: none;\n      float: left;\n      clear: both;\n      margin: 10px 0 0 0;\n      max-width: 90%;\n\n      img {\n        max-width: 100%;\n        vertical-align: middle;\n      }\n\n      &.left {\n        border-bottom-left-radius: 0;\n      }\n\n      &.right {\n        float: right;\n        clear: both;\n        border-bottom-right-radius: 0;\n      }\n\n      .text {\n        word-wrap: break-word;\n      }\n\n      &.chat-img {\n        padding: 5px;\n      }\n\n      a {\n        text-decoration: none;\n        color: $linkColor;\n      }\n\n      ul,\n      ol {\n        margin: 0;\n        padding-left: 1.5em;\n      }\n      ul li,\n      ol li {\n        padding-left: 0;\n      }\n\n      &.waiting {\n        margin: 10px 0;\n        background: transparent;\n        padding: 0;\n\n        @keyframes fade {\n          from {\n            opacity: 1;\n          }\n\n          to {\n            opacity: 0.3;\n          }\n        }\n\n        span {\n          font-size: 1.5em;\n          animation-name: fade;\n          animation-duration: 0.8s;\n          animation-iteration-count: infinite;\n          animation-direction: alternate;\n          animation-timing-function: ease-in-out;\n        }\n        span:nth-child(1) {\n          animation-delay: 0s;\n        }\n        span:nth-child(2) {\n          animation-delay: 0.4s;\n        }\n        span:nth-child(3) {\n          animation-delay: 0.8s;\n        }\n      }\n    }\n\n    .time {\n      list-style: none;\n      clear: both;\n      height: 10px;\n      font-size: 10px;\n      color: desaturate($textColor, 50%);\n      margin: 5px 0 20px 0;\n\n      &.left {\n        float: left;\n      }\n      &.right {\n        float: right;\n      }\n    }\n\n    .chat-buttons {\n      position: relative;\n      padding: 0;\n      font-size: 14px;\n      list-style: none;\n      clear: both;\n      margin: 10px 0;\n      text-align: center;\n\n      .chat-button {\n        display: inline-block;\n        transition: all 0.3s ease;\n        cursor: pointer;\n        margin: 3px;\n\n        background-color: $chromeColor;\n        color: $chromeColor2;\n        border: 2px solid $chromeColor2;\n        padding: 5px 10px;\n        letter-spacing: normal;\n        border-radius: 5px;\n\n        &:hover,\n        &.chat-button-selected {\n          background-color: rgba($chromeColor, 0.6);\n          color: $chromeColor2;\n        }\n        &.chat-button-disabled {\n          color: $chromeColor3;\n          border: 2px solid $chromeColor3;\n        }\n      }\n    }\n  }\n\n  .input {\n    height: 40px;\n    width: 100%;\n    margin: 0;\n    padding: 0 5px;\n    background-color: $chromeColor;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n\n    input[type=\"text\"] {\n      background-color: rgba(white, 0.8);\n      outline: 0;\n      border: 1px solid $chromeColor2;\n      border-right: none;\n      color: $textColor;\n      padding: 0 5px;\n      border-top-left-radius: 3px;\n      border-bottom-left-radius: 3px;\n      border-top-right-radius: 0;\n      border-bottom-right-radius: 0;\n      height: 30px;\n      flex: 4;\n      box-sizing: border-box;\n      font-size: 14px;\n      transition: background-color 0.2s ease;\n\n      &:focus {\n        box-shadow: none;\n        background-color: white;\n      }\n    }\n\n    input[type=\"submit\"] {\n      display: inline-block;\n      background: $chromeColor;\n      border: 1px solid $chromeColor2;\n      color: $chromeColor2;\n      height: 30px;\n      min-width: 70px;\n      line-height: 1;\n      text-align: center;\n      padding: 0;\n      font-size: 12px;\n      flex: 1;\n      box-shadow: none;\n      border-top-left-radius: 0;\n      border-bottom-left-radius: 0;\n      border-top-right-radius: 3px;\n      border-bottom-right-radius: 3px;\n      cursor: pointer;\n      transition: all 0.3s ease;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      outline: none;\n      font-weight: 600;\n      text-transform: uppercase;\n\n      &:hover {\n        background: $bubbleColor;\n      }\n    }\n  }\n\n  #speech-input {\n    height: 30px;\n    width: 30px;\n    margin-left: 5px;\n    background: $chromeColor;\n    border: 1px solid $chromeColor2;\n    color: $chromeColor2;\n    border-radius: 3px;\n    cursor: pointer;\n    transition: all 0.3s ease;\n\n    &:hover {\n      background: $bubbleColor;\n    }\n  }\n\n  .vertical-center {\n    vertical-align: middle;\n  }\n}\n"]}