$bg:  #1b1b1b;
$bg0: #2c2c2c;
$bg1: #353535;
$bg2: #4b4b4b;
$bg3: #888888;
$bg4: #ebebeb;
$bg5: #ffffff;

$red: #cc6666;
$green: #b5bd68;
$yellow: #f0c674;
$amber: #de935f;
$blue: #81a2be;
$purple: #b294bb;
$cyan: #8abeb7;

$spacing: 0.7rem;

@font-face {
  font-family: "Roboto Mono";
  src: url(RobotoMono-Regular.ttf) format("truetype");
}

@font-face {
  font-family: "Roboto Mono Bold";
  src: url(RobotoMono-Bold.ttf) format("truetype");
}

html, body {
  margin: 0;
  padding: 0;
  background: $bg;
  color: white;
  font-family: "Roboto Mono", monospace;
}

input {
  // override gtk styling
  font-family: "Roboto Mono", monospace;
}

body {
  height: 100vh;
  display: flex;
}

#root {
  height: 100vh;
  width: 100vw;
  display: flex;
}

.main {
  flex: 1 1 auto;
}

.sidebar, .main {
  margin: $spacing;
  display: flex;
  flex-direction: column;

  & > div:nth-child(2) { // Room list & Chat
    flex: 1 1 auto;
    overflow-y: auto;
  }
}

.sidebar {
  margin-right: 0;
  flex: 0 0 15vw;
  max-width: 15vw;

  .filter {
    margin-bottom: $spacing;

    input {
      width: 100%;
      box-sizing: border-box;
      padding: $spacing;
      background: $bg2;
      border: none;
      color: white;
      font-size: 1rem;
    }
  }
}

.list {
  background: $bg0;

  div {
    cursor: pointer;
  }
}

.roomListItem {
  height: 2rem + 2* $spacing;
  display: grid;
  grid-template-columns: 2rem + 2*$spacing - 0.2rem auto;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  border-bottom: 1px solid lighten($bg1, 3);

  &:hover {
    background: $bg1;
  }

  &.active {
    background: $bg1;

    #avatar, #name {
      transition: 0.2s;
    }

    #avatar {
      border: 3px solid $amber;
    }

    #name {
      color: $amber;
      font-weight: bold;
      font-family: "Roboto Mono Bold", monospace;
    }
  }

  #avatar {
    box-sizing: border-box;
    height: calc(100% - 6px);
    object-fit: cover;
    border: 3px solid lighten($bg0, 10);
    border-radius: 0.4rem;
    margin: 3px;
  }

  #name {
    font-size: 1rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    padding: $spacing;
    padding-right: $spacing/4;
  }
}

.info {
  background: $bg1;
  padding: $spacing;
  color: $amber;
  font-weight: bold;
  font-family: "Roboto Mono Bold", monospace;
}

.chat {
  padding: $spacing;
  background: $bg0;

  .events {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 100%;
  }

  .event {
    flex: 0 0 auto;
    display: flex;

    .body {
      padding: $spacing;
      padding-top: 0;
      padding-bottom: 0;
    }

    #name {
      font-weight: bold;
      font-family: "Roboto Bold";
      margin-bottom: 0.3 * $spacing;
    }

    #avatar {
      height: 3rem;
      width: 3rem;
      object-fit: cover;

      box-sizing: border-box;
      object-fit: cover;
      border: 3px solid lighten($bg0, 10);
      margin-bottom: $spacing;
    }
  }
}

.event.grouped .body {
  padding-bottom: $spacing;
  margin-left: 3rem;
}

.event.grouped.first .body {
  margin-top: -1.2 * $spacing;
  padding-bottom: 0.3*$spacing;
}

.input {
  background: $bg1;
  display: flex;

  input {
    background: transparent;
    box-sizing: border-box;
    flex: 1 1 auto;
    padding: $spacing;
    font-size: 1.2rem;
  }
}

.noselect {
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
  user-select: none;
}

.fg-palet-red {
  color: $red;
}

.fg-palet-green {
  color: $green;
}

.fg-palet-yellow {
  color: $yellow;
}

.fg-palet-blue {
  color: $blue;
}

.fg-palet-purple {
  color: $purple;
}

.fg-palet-cyan {
  color: $cyan;
}