/* Sidebar and channel selector */
#sidebar {
  background-color: var(--colour-navbar-bg);
}

.list-nav a {
  display: block;
  padding: 0.5rem;
  text-decoration: none;
}

.list-nav ul {
  padding: 0.5rem;
}

.list-nav li {
  border-radius: 0.5rem;
  border: 1px solid var(--colour-navbar-border);
  margin: 0.25rem;
}

.list-nav li.active {
  background-color: var(--colour-navbar-active-bg);
  color: var(--colour-navbar-active-text);
}

.list-nav li.active a {
  color: var(--colour-navbar-active-text);
}

.list-nav li:hover {
  background-color: var(--colour-navbar-hover-bg);
  color: var(--colour-navbar-hover-text);
}

.list-nav li:hover a {
  color: var(--colour-navbar-hover-text);
}

/* create channel form */
.create-channel {
  padding-left: 0.5rem;
}

.create-channel form {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
}

.create-channel input {
  padding: 0.5rem;
  border-radius: 0.5rem 0 0 0.5rem;
  border: 1px solid var(--colour-input-border);
  z-index: 1; /* Just to make the focus-active border go over the following button. */
  flex-grow: 1;
  background-color: var(--colour-input-bg);
  color: var(--colour-input-text);
}

.create-channel button {
  border-radius: 0 0.5rem 0.5rem 0;
  border: 1px solid var(--colour-input-border);
  background-color: var(--colour-input-bg);
  color: var(--colour-input-text);
}

.badge {
  --dimensions: 1.25rem;
  display: inline-block;

  width: var(--dimensions);
  height: var(--dimensions);
  border-radius: var(--dimensions);
  line-height: var(--dimensions);
  text-align: center;
}

.badge.has-unreads {
  /* TODO: Obvs this is a placeholder */
  border: 1px solid mediumaquamarine;
  background-color: lightgreen;
  color: black;
}

.badge.has-no-unreads {
  /* TODO: Obvs this is a placeholder */
  border: 1px solid bisque;
  background-color: antiquewhite;
  color: black;
}

/* TODO: media-query stuff. Margin-left at a constant zero? */