/* stylelint-disable no-descending-specificity */

.base {
  --nav-item-height: 48px;
  background-color: var(--theme-stage);
  border-right: solid var(--theme-stroke-width) var(--theme-stage-border);
  box-sizing: border-box;
  display: flex;
  flex: 0 0 var(--nav-side-bar-width-max);
  flex-direction: column;
  max-height: calc(var(--vh, 1vh) * 100);
  overflow: visible;

  header {
    display: flex;
    flex-direction: column;
  }
  & > section {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-height: 0;
    overflow: hidden auto;
    width: var(--nav-side-bar-width-max);
  }
  section.workspaces {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-height: calc(var(--nav-item-height) * 2);
    overflow: hidden;
    transition: height var(--animation-curve);

    .actionButtons {
      // action buttons are hidden when the cursor is not hovered on buttons
      display: none;
    }
    .navItemContainer:hover .actionButtons {
      align-items: center;
      display: flex;
    }
    .noWorkspaces {
      align-self: center;
      color: var(--theme-stage-on-weak);
      font-size: 12px;
      padding: 6px;
      text-align: center;
    }
    .pinnedWorkspaces {
      list-style: none;
      margin: 0;
      min-height: 0;
      overflow: hidden auto;
      padding: 0;
    }
  }
  footer {
    position: relative;
  }
  .version {
    background-color: var(--theme-stage-strong);
    color: var(--theme-stage-on-strong);
    font-size: 11px;
    font-style: italic;
    height: 32px;
    width: 100%;
  }
  .versionLabel {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
    overflow: hidden;
    white-space: nowrap;
  }
  .launchBlock {
    align-items: center;
    display: flex;
    height: 32px;
    width: 206px;

    .launchButton {
      width: 100%;
    }
    .launchIcon {
      align-items: center;
      background-color: transparent;
      border-color: var(--theme-stage-border);
      border-radius: 0 var(--theme-border-radius) var(--theme-border-radius) 0;
      border-style: solid;
      border-width: var(--theme-stroke-width);
      color: var(--theme-stage-on);
      display: flex;
      flex-shrink: 0;
      justify-content: center;
      width: 32px;
    }
  }
  .launchBlock:hover {
    .launchButton,
    .launchIcon {
      border-color: var(--theme-stage-border-strong);
    }
  }
  .navItemContainer {
    align-items: center;
    background-color: var(--theme-stage);
    display: flex;
    flex-wrap: nowrap;
    width: 100%;

    &.active {
      background-color: var(--theme-stage-strong);
      cursor: default;
    }
    &:hover {
      background-color: var(--theme-stage-strong);
      color: var(--theme-stage-on-strong);
    }
    .navItem {
      align-items: center;
      align-self: flex-start;
      color: var(--theme-stage-on);
      cursor: pointer;
      display: flex;
      flex-grow: 1;
      gap: 16px;
      height: var(--nav-item-height);
      max-width: 100%;
      padding-right: 16px;

      &:first-child {
        min-width: 56px;
        padding-left: 16px;
      }
      .newWorkspaceIcon {
        display: flex;
        justify-content: center;
        width: var(--icon-large);
      }
      .label {
        font-size: 13px;
        height: 24px;
        line-height: 24px;
        overflow: hidden;
        padding-right: 16px;
        white-space: nowrap;
        width: 100%;
      }
    }
    .navItem.active,
    .navItem.active:hover {
      background-color: var(--theme-stage-strong);
      color: var(--theme-stage-on-strong);
    }
    .navItemExtra {
      align-items: center;
      display: flex;
      flex-direction: column;

      & a {
        align-items: center;
        display: flex;
        flex-grow: 1;
      }
      & span {
        cursor: default;
      }
      .status {
        background-color: var(--theme-status-active);
        border-radius: 8px;
        color: var(--theme-status-active-on);
        flex-grow: 0;
        font-size: 11px;
        height: 16px;
        margin-right: 16px;
        padding: 0 6px;
        white-space: nowrap;
      }
      .action {
        height: 100%;

        & * {
          color: #bfbfbf;
          height: 100%;
        }
      }
    }
  }
  .user {
    background-color: var(--theme-stage-weak);
    cursor: pointer;
    padding: 9px 16px;
    width: var(--nav-side-bar-width-max);
  }
  .user:hover {
    background-color: var(--theme-stage-strong);
  }
}
.collapsedAppear {
  flex-basis: 0;
  overflow: hidden;
}
.collapsedEnter,
.collapsedExitDone {
  flex-basis: var(--nav-side-bar-width-max);

  section.launch {
    width: var(--nav-side-bar-width-max);
  }
  .noWorkspaces {
    opacity: 1;
  }
  .navItemContainer {
    width: var(--nav-side-bar-width-max);

    .action,
    .label {
      opacity: 1;
    }
  }
  .navItemContainer.hasStatus {
    height: var(--nav-item-height);
  }
  .user {
    width: var(--nav-side-bar-width-max);

    span {
      opacity: 1;
    }
  }
}
.collapsedEnterActive {
  flex-basis: var(--nav-side-bar-width-min);
  transition: flex-basis var(--animation-curve);

  & > section {
    transition: width var(--animation-curve);
    width: var(--nav-side-bar-width-min);
  }
  .logo {
    height: 24px;
    left: 12px;
    top: 16px;
    transition:
      height var(--animation-curve),
      left var(--animation-curve),
      top var(--animation-curve),
      width var(--animation-curve);
    width: 32px;
  }
  .logoIcon {
    height: 24px;
    left: 0;
    transition:
      height var(--animation-curve),
      left var(--animation-curve),
      width var(--animation-curve);
    width: 32px;
  }
  .logoLabel {
    opacity: 0;
    transition:
      opacity var(--animation-curve),
      width var(--animation-curve);
    width: 0;
  }
  .launchBlock {
    transition: width var(--animation-curve);
    width: 32px;

    .launchButton {
      opacity: 0;
      padding: 0;
      transition:
        opacity var(--animation-curve),
        padding var(--animation-curve),
        width var(--animation-curve);
      width: 0;
    }
    .launchIcon {
      border-radius: 100%;
      transition: border-radius var(--animation-curve);
    }
  }
  .noWorkspaces {
    opacity: 0;
    transition: opacity var(--animation-curve);
  }
  .navItemContainer {
    flex-direction: column;
    transition: width var(--animation-curve);

    .action,
    .label {
      opacity: 0;
      transition: opacity var(--animation-curve);
    }
    .navItemExtra {
      display: none;

      & * {
        flex-direction: column;
        justify-content: center;
      }
      .status {
        margin: 0;
      }
    }
  }
  .navItemContainer.hasStatus {
    height: 72px;
  }
  .user {
    transition: width var(--animation-curve);
    width: var(--nav-side-bar-width-min);

    span {
      opacity: 0;
      transition: opacity var(--animation-curve);
    }
  }
}
.collapsedExit,
.collapsedEnterDone {
  flex-basis: var(--nav-side-bar-width-min);

  & > section {
    width: var(--nav-side-bar-width-min);
  }
  section.workspaces {
    flex-shrink: 0;
    overflow-y: visible;
    transition: height var(--animation-curve);

    .pinnedWorkspaces {
      overflow-y: visible;
    }
  }
  .logo {
    height: 24px;
    left: 12px;
    top: 16px;
    width: 32px;
  }
  .logoIcon {
    height: 24px;
    left: 0;
    width: 32px;
  }
  .logoLabel {
    opacity: 0;
    width: 0;
  }
  .launchBlock {
    width: 32px;

    .launchButton {
      opacity: 0;
      padding: 0;
      width: 0;
    }
    .launchIcon {
      border-radius: 100%;
    }
  }
  .noWorkspaces {
    opacity: 0;
  }
  .navItemContainer {
    flex-direction: column;

    .action,
    .label {
      opacity: 0;
    }
    .navItemExtra {
      & * {
        justify-content: center;
      }
      .status {
        margin: 0;
      }
    }
  }
  .navItemContainer.hasStatus {
    height: 72px;
  }
  .user {
    width: var(--nav-side-bar-width-min);

    span {
      opacity: 0;
    }
  }
}
.collapsedExit {
  .noWorkspaces {
    display: block;
  }
  .navItemContainer {
    .action,
    .label {
      display: block;
    }
  }
}
.collapsedEnterDone {
  .navItemContainer {
    .action,
    .label {
      display: none;
    }
  }
  .noWorkspaces {
    display: none;
  }
}
.collapsedExitActive {
  flex-basis: var(--nav-side-bar-width-max);
  transition: flex-basis var(--animation-curve);

  & > section {
    transition: width var(--animation-curve);
    width: var(--nav-side-bar-width-max);
  }
  .logo {
    height: 64.94px;
    left: 60px;
    top: 24px;
    transition:
      height var(--animation-curve),
      left var(--animation-curve),
      top var(--animation-curve),
      width var(--animation-curve);
    width: 128px;
  }
  .logoIcon {
    height: 40px;
    left: 32px;
    transition:
      height var(--animation-curve),
      left var(--animation-curve),
      width var(--animation-curve);
    width: 52px;
  }
  .logoLabel {
    opacity: 1;
    transition:
      opacity var(--animation-curve),
      width var(--animation-curve);
    width: 120px;
  }
  .launchBlock {
    transition: width var(--animation-curve);
    width: 206px;

    .launchButton {
      opacity: 1;
      padding: 0 16px;
      transition:
        opacity var(--animation-curve),
        padding var(--animation-curve),
        width var(--animation-curve);
      width: 100%;
    }
    .launchIcon {
      border-radius: 0 var(--theme-border-radius) var(--theme-border-radius) 0;
      transition: border-radius var(--animation-curve);
    }
  }
  .noWorkspaces {
    opacity: 1;
    transition: opacity var(--animation-curve);
  }
  .navItemContainer {
    transition:
      height var(--animation-curve),
      width var(--animation-curve);
    width: 100%;

    .action,
    .label {
      opacity: 1;
      transition: opacity var(--animation-curve);
    }
    .navItemExtra {
      display: none;
    }
  }
  .navItemContainer.hasStatus {
    height: var(--nav-item-height);
  }
  .user {
    transition: width var(--animation-curve);
    width: var(--nav-side-bar-width-max);

    span {
      opacity: 1;
      transition: opacity var(--animation-curve);
    }
  }
}
