.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;
  margin: 3px;

  //& .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;
      }
    }
  }

  &--tableFooter {
    border: 1px solid #EBEEF5;
    padding: 3px;
    background-color: #f8fdff;
    border-top-width: 0;

    .el-pagination {
      float: right;
      font-weight: 500;
      padding: 0 0 0 0;

      button,
      span:not([class*="suffix"]) {
        height: $line-height;
        line-height: $line-height;
        min-width: 20px;
        margin: 0;
        padding: 0;
      }

      .el-input__inner {
        height: $line-height;
        line-height: $line-height;
        padding: 0;
        background-color: #fff !important;
      }

      .el-select .el-input {
        margin: 1px 0;
      }

      .btn-prev,
      .btn-next {
        min-width: 20px;
        padding: 0 1px;
        margin: 1px;
      }

      .el-pager {
        height: $line-height;
        line-height: $line-height;

        li {
          min-width: 20px;
          margin: 1px;
          height: $line-height;
          line-height: $line-height;
        }

        .more::before {
          height: $line-height;
          line-height: $line-height;
        }
      }
    }
  }

  &--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;
  }
}