.erda-global-nav {
  height: 100%;
  width: 56px;
  background: #fcfcfc;
  z-index: 10;

  .logo-wrap {
    .erda-global-logo {
      transform: scale(1);
      transition: all 0.1s ease-in;
    }
    .workbench-icon {
      opacity: 0;
      transform: scale(1.3);
      transition: all 0.1s ease-in 0.05s;
    }
    &:hover {
      .erda-global-logo {
        transform: scale(1.3);
        opacity: 0;
      }
      .workbench-icon {
        opacity: 1;
        transform: scale(1);
      }
    }
  }
}

.erda-global-nav-item {
  a {
    color: unset;
  }
  .icon {
    transition: opacity 0.2s cubic-bezier(0.48, 0.43, 0.29, 1.3);
  }
  .active-icon {
    opacity: 0;
  }
  .name {
    opacity: 0;
    position: absolute;
    height: 32px;
    line-height: 32px;
    left: 80%;
    top: 32px;
    background: $color-default;
    white-space: nowrap;
    pointer-events: none;
    transition: opacity 0.2s cubic-bezier(0.48, 0.43, 0.29, 1.3);
  }

  &:hover {
    .name {
      opacity: 1;
    }
    .normal-icon {
      opacity: 0;
    }
    .active-icon {
      opacity: 1;
    }
  }
}

.app-center-version {
  margin-left: 4px;
  background-color: $color-primary;
  color: $white;
  font-size: 12px;
  line-height: 18px;
  padding: 0 8px;
  border-radius: 10px;
}

.nav-org-list {
  margin-bottom: 0;

  li {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    line-height: 26px;
    cursor: pointer;

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

    &:hover {
      color: $color-active;
    }
  }

  .org-logo {
    width: 46px;
    max-height: 30px;
    margin-right: 10px;
  }

  i {
    margin-left: 8px;
  }
}

.side-app-center {
  color: $white;
}

.side-app-center-popover {
  .ant-popover-inner-content {
    padding: 0;
  }

  .ant-menu-vertical {
    .app-center-item {
      height: 32px;
      line-height: 32px;
    }
  }
}

.message-icon .ant-badge-count {
  transform: scale(0.9) translate(50%, -50%);
  padding: 0 4px;
}
