rootstrap/activeadmin-chat

@import 'chat/colors';

.active-admin-chat__chat {
  height: calc(100vh - 270px);

  .active-admin-chat__conversations-list-container {
    display: inline-block;
    height: 100%;
    width: 30%;
  }

  .active-admin-chat__title {
    background-color: $active-admin-chat__lighter-grey;
    background-image: linear-gradient(180deg, $active-admin-chat__lighter-grey, $active-admin-chat__light-grey);
    border: solid 1px $active-admin-chat__grey;
    border-color: $active-admin-chat__light-grey $active-admin-chat__light-grey $active-admin-chat__grey;
    box-shadow: 0 1px 3px rgba($active-admin-chat__black, 0.12), 0 0 1px $active-admin-chat__white inset;
    font-size: 14px;
    font-weight: bold;
    margin: 0;
    padding: 10px 12px 8px;
    text-shadow: $active-admin-chat__white 0 1px 0;
  }

  .active-admin-chat__conversations-list {
    height: calc(100% - 34px);
    margin: 0;
    overflow-y: auto;
    padding: 0;

    a {
      color: inherit;
      text-decoration: inherit;
    }
  }

  .active-admin-chat__conversation-item {
    border-bottom: 1px solid $active-admin-chat__lighter-grey;
    cursor: pointer;
    list-style: none;
    padding: 10px 12px 8px;
    vertical-align: top;

    &:nth-child(even) {
      background-color: $active-admin-chat__lightest-grey;
    }

    &:hover {
      background-color: $active-admin-chat__lighter-grey;
    }

    &.selected {
      background-color: $active-admin-chat__grey;

      &:hover {
        background-color: $active-admin-chat__grey;
      }
    }
  }

  .active-admin-chat__conversation-history-container {
    display: inline-block;
    float: right;
    height: 100%;
    width: 70%;
  }

  .active-admin-chat__conversation-history {
    background-color: $active-admin-chat__lighter-grey;
    display: flex;
    flex-direction: column;
    height: calc(100% - 61px);
    overflow: auto;
    padding: 0 15px;

    &.no-messages {
      font-size: 24px;
      margin: auto;
      padding: 50px;
    }
  }

  .active-admin-chat__message-container {
    &:first-child {
      margin-top: auto;
    }

    div {
      background-color: $active-admin-chat__white;
      border-radius: 10px 10px 10px 0;
      display: inline-block;
      margin: 3px;
      max-width: 70%;
      padding: 5px;
      word-break: break-word;

      p {
        font-size: 12px;
        margin: 0 0 0 2px;
      }

      span {
        font-size: 10px;
      }
    }

    &.admin {
      text-align: right;

      div {
        background-color: $active-admin-chat__green;
        border-radius: 10px 10px 0;
      }
    }
  }

  .active-admin-chat__send-message-container {
    background-color: $active-admin-chat__lighter-grey;
    height: 61px;

    input {
      border: 0;
      border-radius: 25px;
      margin: 10px 30px;
      outline: none;
      padding: 15px;
      width: calc(100% - 90px);
    }
  }
}