@charset "UTF-8";
@import "./common/var.css";
@import "./common/transition.css";
@component-namespace el{
  @b panel {
    background-color: var(--color-white);
    padding: 0 var(--panel-base-padding);
    border-color: var(--panel-gray-light-color);
      @e info {
        padding: 0;
        border-color: var(--panel-info-color);
        box-sizing: border-box;
          .el-panel__heading{
            border-bottom: 0;
            color: var(--panel-white-color);
            background-color: var(--panel-info-color);
            padding: 0 var(--panel-base-padding);
              h3{
                color: var(--panel-white-color);
              }
              .el-panel__options{
                  a{
                    color: var(--panel-white-color);
                  }
              }
          }
          .el-panel__body{
            padding: var(--panel-body-padding-theme);
          }
          .el-panel__disabled{
            background-color: var(--panel-info-disabled-color);
          }
    }
      @e success {
        padding: 0;

        border-color: var(--panel-success-color);
          .el-panel__heading{
            border-bottom: 0;
            background-color: var(--panel-success-color);
            padding: 0 var(--panel-base-padding);
            color: var(--panel-white-color);
              h3{
                color: var(--panel-white-color);
              }
              .el-panel__options{
                a{
                  color: var(--panel-white-color);
                }
              }
          }
          .el-panel__body{
            padding: var(--panel-body-padding-theme);
          }
          .el-panel__disabled{
            background-color: var(--panel-success-disabled-color);
          }
      }
      @e warning {
        padding: 0;
        border-color: var(--panel-warning-color);
          .el-panel__heading{
            border-bottom: 0;
            background-color: var(--panel-warning-color);
            padding: 0 var(--panel-base-padding);
            color: var(--panel-white-color);
              h3{
                color: var(--panel-white-color);
              }
              .el-panel__options{
                a{
                color: var(--panel-white-color);
                }
              }
          }
          .el-panel__body{
            padding: var(--panel-body-padding-theme);
          }
          .el-panel__disabled{
            background-color: var(--panel-warning-disabled-color);
          }
      }
      @e danger {
        padding: 0;
        border-color: var(--panel-danger-color);
          .el-panel__heading{
            border-bottom: 0;
            background-color: var(--panel-danger-color);
            padding: 0 var(--panel-base-padding);
            color: var(--panel-white-color);
              h3{
                color: var(--panel-white-color);
              }
              .el-panel__options{
                a{
                  color: var(--panel-white-color);
                }
              }
          }
          .el-panel__body{
            padding: var(--panel-body-padding-theme);
          }
          .el-panel__disabled{
            background-color: var(--panel-danger-disabled-color);
          }
      }

      @e gray {
        padding: 0;
        border-color: var(--panel-gray-light-color);
          .el-panel__heading{
            border-bottom: 0;
            color: var(--panel-main-text-color);
            background-color: var(--panel-gray-color);
            padding: 0 var(--panel-base-padding);
            h3{
              color: var(--panel-main-text-color);
            }
            .el-panel__options{
            a{
              color: var(--panel-main-text-color);
            }
          }
        }

        .el-panel__body{
          padding: var(--panel-body-padding-theme);
        }
        .el-panel__disabled{
          background-color: var(--panel-gray-disabled-color);
        }
      }

      @e flat {
        background: none;
        padding: 0;
        .el-panel__heading {
          border-bottom-color: var(--panel-gray-light-color);
        }
/*        .el-panel__body{
          padding: 0;
        }*/
      }
      @e inverted{
        background-color: var(--panel-inverted-color);
          .el-panel__heading{
            color: var(--panel-white-color);
              h3{
                color: var(--panel-white-color);
              }
              .el-panel__options{
                a{
                  color: var(--panel-white-color);
                }
              }
          }
          .el-panel__heading {
            border-bottom-color: var(--panel-white-color);
         }
          .el-panel__body{
            color: var(--panel-white-color);
          }
          .el-panel__disabled {
            background-color: var(--panel-inverted-disabled-color);
          }
      }
      @e heading{
        padding: 0;
        width: 100%;
        box-sizing: border-box;
        height:var(--panel-base-height);
        line-height:var(--panel-base-line-height);
        color: var(--panel-main-text-color);
          .el-panel__title{
            float: left;
            line-height:var(--panel-base-line-height);
            margin:0;
            max-width: 50%;
            overflow: hidden;
            white-space: nowrap;
            -ms-text-overflow: ellipsis;
            text-overflow: ellipsis;
            font-size: var(--panel-during-font-size);
              a{
                cursor: pointer;
              }
          }
          .el-panel__options{
            float: right;
            white-space: nowrap;
            overflow: hidden;
            max-width: 50%;
            text-align: right;
            font-size: var(--panel-during-font-size);
              a {
                font-size: var(--panel-icon-font-size);
                display: inline-block;
                color: var(--panel-main-text-color);
                cursor: pointer;
                margin: 0 var(--panel-icon-margin);
              }
          }
      }
      @e body{
        padding: var(--panel-body-padding-default);
        border-top: 1px solid var(--panel-gray-light-color);
        color: var(--panel-main-text-color);
        font-size: var(--panel-base-font-size);
      }
      @e disabled{
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background-color: var(--panel-disabled-color);
      }
      @e refresh{
        position: relative;
      }
  }
  .border{
      border-width: var(--panel-border-width);
      border-style: solid;
  }
}