$width: 200px;
$collapsedWidth: 56px;
$appListWidth: 770px;

._nc-side-wrap {
  position: relative;
  width: $width;
  height: 100%;
  font-size: 12px;
}

._nc-side-content {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
}

._nc-side-menu-wrap {
  width: $width;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: #001529;
}

._nc-side-menu-content {
  flex: 1;
  width: $width;
  overflow: auto;
  padding: 8px 0;
}

._nc-side-menu-item,
._nc-side-menu-folder {
  &>img {
    width: 16px;
  }
}

._nc-side-app-collapsed-trigger,
._nc-side-menu-item,
._nc-side-menu-folder,
._nc-side-sub-menu-item {
  display: flex;
  align-items: center;
  height: 36px;
  cursor: pointer;
  color: rgba(255, 255, 255, .65);

  &>*:not(:first-child) {
    margin-left: 8px;
  }

  &>*:last-child {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

._nc-side-menu-item,
._nc-side-menu-folder,
._nc-side-sub-menu-item {
  &:hover {
    color: #ffffff;
    background-color: rgba(255, 255, 255, .1);
  }
}

._nc-side-menu-item {
  padding: 0 20px;
}

._nc-side-app-collapsed-trigger,
._nc-side-menu-folder {
  position: relative;
  padding: 0 36px 0 20px;

  &::before,
  &::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 20px;
    width: 6px;
    height: 1.5px;
    display: block;
    background-color: #ffffff;
    background-image: linear-gradient(to right, rgba(0, 0, 0, .65), rgba(0, 0, 0, .65));
    border-radius: 2px;
    transition: background-color .3s cubic-bezier(.645, .045, .355, 1),
      transform .3s cubic-bezier(.645, .045, .355, 1),
      top .3s cubic-bezier(.645, .045, .355, 1);
  }

  &::before {
    transform: rotate(45deg) translate(-1px, 1px);
  }

  &::after {
    transform: rotate(-45deg) translate(1px, 1px);
  }

  &:hover {

    &::before,
    &::after {
      background-image: none;
    }
  }
}

._nc-side-menu-folder-unfolded {
  color: #ffffff;
  background-color: #000c17;

  &::before,
  &::after {
    background-image: none;
  }

  &::before {
    transform: rotate(-45deg) translate(-1px, -1px);
  }

  &::after {
    transform: rotate(45deg) translate(1px, -1px);
  }
}

._nc-side-sub-menu {
  overflow: hidden;
  background-color: #000c17;
}

._nc-side-sub-menu-item {
  padding: 0 12px 0 44px;
}

._nc-side-auto-collapsed-trigger {
  border-top: 1px solid rgba(255, 255, 255, .1);

  i[nz-icon] {
    cursor: pointer;
    font-size: 16px;
    padding: 10px 20px;
    color: rgba(255, 255, 255, .65);

    &:hover {
      color: #ffffff;
      background-color: rgba(255, 255, 255, .1);
    }
  }
}

._nc-side-app-wrap {
  &:hover {
    ._nc-side-app-collapsed-trigger {
      background-color: rgba(255, 255, 255, .1);

      &::before,
      &::after {
        background-image: none;
      }
    }

    ._nc-side-app-content {
      width: $appListWidth;
      opacity: 1;
      box-shadow: 4px 0 8px 0 rgba(0, 0, 0, .2);
    }
  }
}

._nc-side-app-collapsed-trigger {
  width: 200px;
  height: 40px;
  padding: 0 36px 0 16px;
  color: #ffffff;
  font-size: 14px;
  font-weight: bold;
  border-bottom: 1px solid rgba(255, 255, 255, .1);

  &>img {
    width: 24px;
    display: none;
  }

  &>*:not(img):first-of-type {
    margin-left: 4px;
  }

  &::before {
    transform: rotate(45deg) translate(-1px, -1px);
  }

  &::after {
    transform: rotate(-45deg) translate(-1px, 1px);
  }
}

._nc-side-app-content {
  position: absolute;
  top: 0;
  left: 100%;
  bottom: 0;
  z-index: 1000;
  background-color: #ffffff;
  overflow-x: hidden;
  overflow-y: auto;
  width: 0;
  opacity: 0;
  transition: all .2s;
  transition-delay: .2s;

  nc-app-list {
    display: block;
    width: $appListWidth;
  }
}

._nc-side-auto-collapsed {
  width: $collapsedWidth;

  ._nc-side-menu-wrap {
    width: $collapsedWidth;
    transition: all .2s;

    ._nc-side-menu-folder {

      &::before,
      &::after {
        display: none;
      }
    }

    ._nc-side-menu-folder-unfolded {
      color: rgba(255, 255, 255, .65);
      background-color: transparent;

      &:hover {
        color: #ffffff;
        background-color: rgba(255, 255, 255, .1);
      }
    }

    ._nc-side-sub-menu {
      display: none;
    }

    ._nc-side-app-collapsed-trigger,
    ._nc-side-menu-item,
    ._nc-side-menu-folder {
      &>*:not(:first-child) {
        display: none;
      }
    }

    ._nc-side-app-collapsed-trigger {
      &>img {
        display: block;
      }
    }
  }

  ._nc-side-menu-expand-start {
    width: $width;
    box-shadow: 4px 0 8px 0 rgba(0, 0, 0, .2);
    transition-delay: .2s;
  }

  ._nc-side-menu-expand-done {
    ._nc-side-menu-folder {

      &::before,
      &::after {
        display: block;
      }
    }

    ._nc-side-menu-folder-unfolded {
      color: #ffffff;
      background-color: #000c17;
    }

    ._nc-side-sub-menu {
      display: block;
    }

    ._nc-side-app-collapsed-trigger,
    ._nc-side-menu-item,
    ._nc-side-menu-folder {
      &>*:not(:first-child) {
        display: block;
      }
    }

    ._nc-side-app-collapsed-trigger {
      &>img {
        display: none;
      }
    }
  }
}