.la-panel {
  background: #fff;
  box-sizing: border-box;
  border-radius: 6px;
  border: 1px solid #bfcbd9;
  margin-bottom: 6px;
  display: flex;
  flex-direction: column;
  outline: none;

  & .la-panel {
    margin: 3px;
  }

  &__icon {
    color: #20a0ff;
  }

  &--full {
    min-height: 100%;
  }

  &:focus,
  &--focus {
    border-color: #6eabf0;
  }

  &--maximize {
    position: absolute;
    left: 0%;
    top: 0%;
    width: 100%;
    height: 100%;
    z-index: 99999999999;
  }

  &__buttons {
    float: right;
    margin-top: 0px;
    .el-button {
      padding: 3px;
      font-size: 12px;
    }
  }

  &__header {
    background-color: #bfcbd94a;
    border-radius: 6px 6px 0 0;
    color: #000;
    height: $header-height;
    line-height: $header-height;
    padding: 0 10px;
    border-bottom: 1px solid #bfcbd9;
    cursor: default;
    &:before {
      content: "";
      width: 2px;
      height: 12px;
      display: inline-block;
      background-color: #20a0ff;
      transform: translateY(2px);
      margin-right: 4px;
    }
  }

  &__body {
    flex: 1;
    padding: $margin * 2;
    transition: height 0.5s;
    height: 100%;
  }

  //变种区-----------------
  &--collapse {
    .la-panel__header {
      color: #20a0ff;
      &:before {
        content: unset;
      }
    }
  }

  &__colbtn {
    cursor: pointer;
    &__icon {
      margin-right: 4px;
      transform: rotate(90deg);
      transition: transform 0.5s;
    }
  }

  &--light {
    border: none;
    .la-panel__header {
      background-color: #ebf1f3d7;
      border-bottom: none;
      &:before {
        content: unset;
      }
    }
  }

  &--icon {
    .la-panel__header {
      &:before {
        content: unset;
      }
    }
  }

  &--closed {
    .la-panel__header {
      border-bottom: none;
      &:before {
        content: unset;
      }
      .la-panel__colbtn__icon {
        transform: rotate(0);
      }
    }
    .la-panel__body {
      height: 0;
      padding: 0;
      * {
        display: none;
      }
    }
  }
}

.el-popper.la-panel-help-popper {
  background: #000;
  color: #fff;
  font-size: 12px;
  padding: 6px;
  &[x-placement^="top"] .popper__arrow::after {
    border-top-color: #000;
  }
  &[x-placement^="bottom"] .popper__arrow::after {
    border-bottom-color: #000;
  }
  &[x-placement^="left"] .popper__arrow::after {
    border-left-color: #000;
  }
  &[x-placement^="right"] .popper__arrow::after {
    border-right-color: #000;
  }
}