.root {
  --icon-size: 14px;
  --icon-spacing: 5.5px;
  border-bottom: 1px solid var(--default-border-color);
  color: var(--sidebar-gray);
  display: flex;
  flex-wrap: wrap;
  font-size: 14px;
  justify-content: flex-start;
  padding: 18px var(--right-sidebar-horizontal-padding);
  padding-right: calc(
    var(--right-sidebar-horizontal-padding) +
    var(--scrollbar-width)
  );
  /* Allows the border to protrude slightly outwards */
  width: calc(100% + var(--scrollbar-width));
}

.root * {
  color: var(--sidebar-gray);
}

.root > *, .root label > span {
  transition: .2s;
}

.root > *:hover, .root label:hover > span {
  color: var(--right-sidebar-top-bar-hover);
}

.backgroundIcon {
  background-repeat: no-repeat;
  background-size: var(--icon-size) var(--icon-size);
  background-position: 0 4.25px;
  padding-left: calc( var(--icon-size) + var(--icon-spacing) );
}

.backgroundIcon:hover {
  text-decoration: none;
}

.toggle {
  align-items: center;
  cursor: pointer;
  display: flex;
  margin-left: 26px;
}

.toggle > span {
  margin-left: var(--icon-spacing);
}

html[data-theme='dark'] {
  --right-sidebar-top-bar-hover: var(--accent-highlight);
}

:root {
  --right-sidebar-top-bar-hover: #354052;
}
