@mixin full {
  display: flex;
  flex: 1;
}


body,
.main {
  @include full;
  margin: 0;
  padding: 0;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  font-family: "Inter var", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.chatroom {
  flex: 1;
  overflow-y: scroll;

  .day {
    text-align: center;
    padding: 10pt;
    top: 0;
    position: sticky;
  }

  .message {
    header {
      display: flex;

      div {
        padding: 0 5pt;
      }

      .time {
        font-family: "Roboto Condensed";
        color: grey;
      }

      .realname {
        font-weight: bold;
      }

      .username {
        color: grey;
      }
    }

    p {
      padding: 0 15pt;
      margin: 5pt 0 15pt 0;
      font-size: 11pt;
    }
  }

  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }
}

.channelList {
  flex: 0 200px;
  overflow-y: scroll;

  .workspace {

    .title {
      display: flex;
      align-items: center;
      padding: 10pt;

      img {
        max-height: 2em;
        margin-right: 1em;
      }
    }

    .chats {
      ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
      }

      li {
        padding: 4pt 5pt;
        font-size: 10pt;
        cursor: pointer;

        &:hover {
          background-color: grey;
        }

        &.active {
          background-color: blue;
          color: white;
        }
      }
    }
  }
}