/* Context sidebar */

.context-sidebar-wrapper {
  z-index: 1;
}

.context-sidebar {
  background: var(--bs-body-bg);
  height: calc(100vh);
  border-right: solid 1px;
}

.context-sidebar-content {
  display: flex;
  flex-direction: column;
  width: 220px;
  height: 100%;
}


/* Sidebar buttons */

.sidebar-button {
  width: 100%;
  display: inline-block;
  padding: .3rem .5rem .1875rem .5rem;
  margin-top: .2rem;
  color: var(--bs-light);
  text-decoration: none;
  border-radius: 0.5rem;
  cursor: pointer;

  clear: both;
  text-align: inherit;
  background-color: transparent;
  border: 0;
}

.sidebar-button:hover,
.sidebar-button:focus {
  color: var(--theme-9);
  background-color: var(--theme-2);
}

.sidebar-button.active {
  color: var(--theme-10);
  background-color: var(--theme-7);
}

.sidebar-button.active:hover,
.sidebar-button.active:focus {
  color: var(--theme-2) !important;
  background-color: var(--theme-8) !important;
}

.sidebar-button {
  -webkit-transition: all .2s ease-out;
  -moz-transition: all .2s ease-out;
  -o-transition: all .2s ease-out;
  transition: all .2s ease-out;
}

.sidebar-button.context {
  color: var(--bs-body-color);
}