.sidebar {
  box-sizing: border-box;
  width: var(--sidebarWidthClosed);
  background-color: var(--sidebarBackgroundColor);
  border: var(--sidebarBorderWidth) solid var(--sidebarBorderColor);
  color: var(--sidebarColor);
  height: 100%;
  overflow: hidden;
  position: relative;
  z-index: var(--sidebarZIndex);
  transition: var(--sidebarTransitionDuration) ease;
}

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

.sidebarContent {
  overflow-y: auto;
  overflow-x: hidden;
}

.actionableInfo {
  border-bottom: var(--sidebarHeaderBorderWidth) solid var(--sidebarHeaderBorderColor);
  border-right: var(--actionableInfoBorderWidth) solid var(--sidebarBackgroundColor);
  text-align: center;
}

.actionableInfo:hover {
  border-right: var(--actionableInfoBorderWidth) solid var(--actionableInfoHoverBorderColor);
}

.description {
  color: var(--descriptionFontColor);
  display: none;
  font-size: var(--descriptionFontSize);
}

.headerSpacing {
  display: flex;
  flex-direction: row;
  padding: var(--headerSpacingPadding);
}

.headerBottomBorder {
  border-bottom: solid var(--sidebarHeaderBorderWidth);
  border-color: var(--sidebarHeaderBorderColor);
}

.iconWrapper {
  margin-left: auto;
}

.pinnedSection {
  width: 100%;
  background-color: var(--pinnedSectionBackgroundColor);
}

.pinnedSection .headerSpacing {
  flex-grow: 1;
}

.questionNavigatorPadding {
  padding-top: var(--questionNavigatorPadding);
}

/* ========================= */
/* sidebarIsOpen overrides */
/* ========================= */

.sidebar.sidebarIsOpen {
  width: var(--sidebarWidthOpen);
  transition: var(--sidebarTransitionDuration) ease;
  opacity: 1;
}

.sidebarIsOpen {
  & .description {
    cursor: pointer;
    display: inline-block;
  }

  & .actionableInfo {
    text-align: inherit;
  }
}

.sidebarClosed {
  display: none;
}

.sidebarClosed.iconWrapper {
  margin: auto;
  display: block;
}

.commonContainer {
  height: 100%;
}

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

@media screen and (--phoneBreakPoint) {
  .commonContainer {
    position: relative;
  }

  .sidebar {
    position: absolute;
    width: 0;
    transition: var(--sidebarTransitionDuration) ease;
  }

  .sidebar.sidebarIsOpen {
    display: inline;
    width: 100vw;
    max-width: 100vw;
    transition: var(--sidebarTransitionDuration) ease;
  }
}
