.sideBar {
  background: var(--background-dark);

  height: 100vh;

  position: sticky;
  top: 0px;
  left: 0px;
  z-index: 20;

  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-y: scroll;

  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */

  .selected {
    background: var(--background);
    border-right: 1px solid var(--brand);
    opacity: 1;
  }
}

.sideBarLink {
  display: flex;
  align-items: center;
  justify-content: center;

  height: 100px;
  padding: 1rem;
  // flex-shrink: 0;

  writing-mode: vertical-lr;
  font-size: var(--text-sm);
  font-weight: 200;
  opacity: 0.5;

  border-right: 1px solid transparent;

  transition: 0.1s all;
}

.sideBarLink:hover {
  background: var(--background);
  border-right: 1px solid var(--brand);
  opacity: 1;
}

.logo {
  cursor: pointer;
  flex-shrink: 0;

  font-size: var(--text-md);
  font-weight: 900;
  line-height: 1;

  width: 45px;
  height: 45px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: var(--background);
  border-radius: 4px;

  margin: 1.8rem 0;

  span {
    font-size: var(--text-md);
    font-weight: 900;
    line-height: 1;
    color: var(--brand);
  }
}

.sideBar::-webkit-scrollbar {
  display: none;
}
