@import '../../constants/styles';
@import '../../constants/panel';

.LeftPanel {
  @extend %left-panel;

  .left-panel-header {
    display: flex;
    align-items: center;
    margin: 16px;

    .close-btn {
      cursor: pointer;
      margin-right: 17px;
    }

    @include mobile {
      margin: 0px;
      padding: 13px 17px;
      background-color: $white;
      background-color: var(--primary-color);
    }
  }

  .Panel {
    @extend %sub-panel;
  }
}

.resize-bar {
  cursor: col-resize;
  left: $left-panel-width;
  // to make the resize-bar center at the right edge of the left panel
  margin-left: -10px;
  width: 20px;
  height: 100%;
  margin-bottom: 0;
  background-color: none;
  position: absolute;
  z-index: 100;
}
