@use '../../scss/variables' as *;

.navigation-bar {
  background-color: var(--background-color);
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 0;
  left: 0;
  padding-top: $toolbar-height;
  width: $navigation-bar-width;
  height: 100%;
  border-right: 1px solid var(--secondary-color);
  z-index: 2;
  transition: transform 200ms ease-in-out;
}

.navigation-bar__folders {
  display: flex;
  flex: none;
  flex-direction: column;
  border-bottom: 1px solid var(--secondary-color);
}

.navigation-bar__tags {
  display: flex;
  height: 100%;
  flex-direction: column;
  flex: 0 1 auto;
  overflow: hidden;
  min-height: 9em;
  padding: 12px 0 0;
}

.navigation-bar__untagged {
  border-top: 1px solid var(--secondary-color);
}

.navigation-bar__tools {
  flex: 1 0 auto;
  padding: 10px 0;
  border-top: 1px solid var(--secondary-color);
}

.navigation-bar__footer {
  color: var(--foreground-color);
  display: flex;
  flex: none;
  justify-content: flex-start;
  align-items: center;
  padding: 0 20px 20px;
}

.navigation-bar__server-connection {
  color: var(--foreground-color);
  display: flex;
  flex: none;
  justify-content: flex-start;
  align-items: center;
  padding: 0 20px;
}

.navigation-bar__footer-item {
  margin-right: 10px;

  &:last-child {
    margin-right: 0;
  }
}
