:root {
  --brand-color: #a200ff;
}

* {
  margin: 0;
}

html {
  background-color: #333;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
}

.mentions {
  color: white;
  background-color: #ff1717;
  padding: 2px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
}

.channel-bar {
  padding: 5px;
  width: 200px;
  position: absolute;
  right: calc(100% - 250px);
}

.pillWrapper {
  align-items: center;
  contain: layout size;
  display: flex;
  height: 100%;
  justify-content: flex-start;
  overflow: hidden;
  position: relative;
  width: 8px
}

.pill {
  width: 8px;
  height: 0;
  background-color: white;
  border-radius: 0 4px 4px 0;
  transition: height 0.2s ease, translate 0.3s ease, opacity 0.1s ease;
  opacity: 0;

  &.unread {
    height: 8px;
    opacity: 1;
  }

  &.hover {
    height: 20px;
    opacity: 1;
  }

  &.open {
    height: 40px;
    opacity: 1;
  }
}

.channel {
  .mentions {
    position: relative;
    bottom: 27px;
    left: 85%;
  }
  .pillWrapper {
    position: relative;
    right: 2px;
    top: 9px;
    height: 17px;
  }
  .channelname {
    position: relative;
    top: -10px;
    left: 10px;
  }
}

.server-bar {
  width: 50px;
  position: absolute;
  left: 0;
}

.guild {
  width: 40px;
  height: 40px;
  font-size: 12px;
  .guildname {
    right: -10px;
    top: -20px;
    position: relative;
  }
  .pillWrapper {
    position: relative;
    right: 2px;
    top: 9px;
  }
}

.messages {
  padding: 5px;
  width: calc(100% - 250px);
  height: calc(100% - 44px);
  overflow: hidden scroll;
  position: absolute;
  right: 0;
}

.message {
  margin-left: 50px;
  margin-bottom: 2px;
  &.bottom {
    margin-bottom: 15px;
  }
  position: relative;
  &.sending {
    color: #777;
  }
  &.mentionsyou {
    background-color: #b87d00;
  }
  .messagePfp {
    left: -50px;
    position: absolute;
    border-radius: 100%;
    cursor: pointer;
    &:active {
      top: 1px;
    }
  }
  .messageAuthor {
    span {
      font-weight: 600;
      cursor: pointer;
      max-width: fit-content;
      &:hover {
        text-decoration: underline;
      }
    }
    .messageTimestamp {
      font-weight: initial;
      color: #777;
      font-size: 10px;
      display: inline;
    }
  }
  .messageContent {
    top: -1px;
    position: relative;
  }
  .mention {
    display: inline;
    background-color: #0099ff54;
    padding: 2px;
    border-radius: 3px;
    cursor: pointer;
    &:hover {
      background-color: #0099ff79;
    }
  }
  .badge {
    background-color: var(--badge-color);
    max-width: fit-content;
    padding: 2px;
    border-radius: 10%;
    font-size: 8pt;
    display: inline;
  }
}

.textbox {
  padding: 3px;
  position: absolute;
  bottom: 5px;
  right: 5px;
  width: calc(100% - 250px);
  background-color: #222;
}
.editor:empty:before {
  content: attr(data-text);
  color: grey;
}