.container {
  position: relative;
  display: flex;
  flex-direction: column;
  height: calc(~'100vh - 64px');
  background: var(--easyv-background-6);
  border-right: 1px solid #0d0e10;
  transition: all linear 500ms;
}

.title {
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 14px;
  color: var(--easyv-text-tab);
  border-bottom: 1px solid var(--easyv-border-black-color);
  background: var(--easyv-background-4);
}

.iconWrap {
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  cursor: pointer;
  i {
    color: #bfbfbf;
    &:hover {
      color: #fff;
    }
  }
  &.disabled {
    cursor: not-allowed;
    i {
      color: var(--easyv-icon-disabled-color);
    }
  }
}

:global(.leave) {
  .container {
    transform: translateX(-100%);
  }
}

:global(.enter) {
  .container {
    transform: translateX(0);
  }
}

.handle {
  &:hover {
    background-color: var(--easyv-primary-color);
  }
}
