.sidebar {
  width: var(--sidebar-width-closed);
  background-color: var(--darkest-gray);
  color: var(--darker-gray);
  height: 100%;
  overflow: hidden;
  position: relative;
  z-index: var(--sidebar-z-index);
  transition: var(--duration-short) ease;
}

.sidebarWrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.sidebar_content {
  flex: 1;
  overflow-y: auto;
}

.info_holder {
  font-size: var(--font-size-xs);
  height: 2rem;
  border-bottom: solid var(--standard-border-width);
  border-color: var(--even-darker-gray);

  display: flex;
  justify-content: center;
  align-items: center;
  padding-left: var(--large-padding);
}

.actionable_info {
  cursor: pointer;
}

.actionable_info:hover {
  background-color: var(--even-darker-gray);
}

.title {
  /* shown when sidebar is open */
  display: none;
}

.description {
  /* shown when sidebar is open */
  display: none;
}

.sidebarHeader {
  width: 100%;
  display: inline-flex;
  justify-content: space-around;
  align-content: center;
  border-bottom: solid var(--standard-border-width);
  border-color: var(--even-darker-gray);
}

.sidebarHeaderTitle {
  display: flex;
  align-items: center;
  font-size: var(--font-size-sm);
}

.sidebarButtonWrapper {
  display: flex;
  align-items: center;
}

.sidebarButton {
  font-size: var(--font-size-lg);
  color: var(--light-gray);
  background: transparent;
  border: none;
}

.sidebarButton:hover {
  opacity: var(--standard-see-through);
}


/* ========================= */
/* sidebar_is_open overrides */
/* ========================= */

.sidebar.sidebar_is_open {
  width: var(--sidebar-width-open);
  transition: var(--duration-short) ease;
  opacity: 1;
}

.sidebar_is_open {
  & .title {
    width: 100%;
    display: inline;
  }

  & .description {
    display: inline;
    width: 100%;
    font-size: var(--font-size-xs);
  }

  & .sidebarHeader {
    box-sizing: border-box;
    padding-left: var(--large-padding);
    justify-content: space-between;
  }
}

/* ========================= */
/*   screen size overrides   */
/* ========================= */

@media (--phone-break-point) {
  .sidebar {
    position: absolute;
    width: 0;
    transition: var(--duration-short) ease;
  }

  .sidebar.sidebar_is_open {
    display: inline;
    width: 100vw;
    min-width: 100vw;
    max-width: 100vw;
    transition: var(--duration-short) ease;
  }
}