@import url('../../styles/variables');

@sidebar-width: 320px;

.appSidebarContainer {
  height: 100vh;
  position: absolute;
  left: 0;
  width: @sidebar-width;
  transition: all 0.5s;
  &.hide {
    left: -@sidebar-width;
  }
}

.appSidebar {
  display: inline-block;
  width: 100%;
  height: 100vh;
  background-color: @bg-color;
  box-shadow: @box-shadow-base;
}

.appSidebarToggleBtn {
  @toggle-btn-width: 17px;
  @toggle-btn-height: 60px;
  @triangle-width: 12px;

  background-color: @bg-color !important;
  position: absolute;
  left: @sidebar-width;
  top: 50%;
  height: @toggle-btn-height;
  width: @toggle-btn-width;
  transform: translate(0, -@toggle-btn-height / 2);
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  &:before,
  &:after {
    position: absolute;
    left: -@triangle-width;
    width: 0;
    height: 0;
    border: @triangle-width solid transparent;
    display: inline-block;
    content: '';
  }

  &:before {
    top: -@triangle-width;
    border-right-color: @bg-color;
    transform: rotate(-45deg);
  }

  &:after {
    bottom: -@triangle-width + 1px;
    border-left-color: @bg-color;
    transform: rotate(225deg);
  }
  :global {
    .dpiconfont {
      line-height: 100%;
      font-size: 18px;
      font-weight: bold;
    }
  }
  &:hover {
    background-color: @bg-color;
  }
}

.resizePanel {
  height: calc(100% - @header-height);
  .resizeLine {
    height: 1px;
    background-color: @border-color-base;
    overflow: visible;
    &:hover {
      background-color: @primary-color;
    }
    &.resizeLineActive {
      background-color: @primary-color;
      .resizeDragLine {
        cursor: move;
      }
    }
    .resizeDragLine {
      height: 11px;
      position: relative;
      top: -5px;
      cursor: move;
    }
  }
}