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

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

.list-nav li {
  padding: 0.5rem;
  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);
}

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

/* 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);
}

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