.#{$ns}Panel {
  margin-bottom: var(--Panel-marginBottom);
  background: var(--Panel-bg);
  border: var(--Panel-border);
  border-radius: var(--Panel-borderRadius);
  -webkit-box-shadow: var(--Panel-boxShadow);
  box-shadow: var(--Panel-boxShadow);

  &-fixedBottom {
    position: absolute;
    background: var(--white);
    z-index: $zindex-affix;
    bottom: 999999px;
    box-shadow: var(--Panel-fixedBottom-boxShadow);
    border-top: var(--Panel-fixedBottom-borderTop);

    &.in {
      position: fixed;
      bottom: 0;
    }
  }

  /* 主题 */
  &--default {
    border-color: var(--borderColor);

    > .#{$ns}Panel-heading {
      background: var(--Panel--default-bg);
      color: var(--Panel--default-color);

      .badge {
        color: var(--Panel--default-badgeColor);
        background: var(--Panel--default-badgeBg);
      }
    }

    > .#{$ns}Panel-heading {
      border-color: var(--Panel--default-headingBorderColor);
    }
  }

  &--primary {
    border-color: var(--primary);

    > .#{$ns}Panel-heading {
      background: var(--primary);
      color: var(--white);

      .badge {
        color: var(--primary);
        background: var(--white);
      }
    }

    > .#{$ns}Panel-heading,
    > .#{$ns}Panel-footer {
      border-color: var(--primary);
    }
  }

  &--success {
    border-color: var(--success);

    > .#{$ns}Panel-heading {
      background: var(--success);
      color: var(--white);

      .badge {
        color: var(--success);
        background: var(--white);
      }
    }

    > .#{$ns}Panel-heading,
    > .#{$ns}Panel-footer {
      border-color: var(--success);
    }
  }

  &--info {
    border-color: var(--info);

    > .#{$ns}Panel-heading {
      background: var(--info);
      color: var(--white);

      .badge {
        color: var(--info);
        background: var(--white);
      }
    }

    > .#{$ns}Panel-heading,
    > .#{$ns}Panel-footer {
      border-color: var(--info);
    }
  }

  &--warning {
    border-color: var(--warning);

    > .#{$ns}Panel-heading {
      background: var(--warning);
      color: var(--white);

      .badge {
        color: var(--warning);
        background: var(--white);
      }
    }

    > .#{$ns}Panel-heading,
    > .#{$ns}Panel-footer {
      border-color: var(--warning);
    }
  }

  &--danger {
    border-color: var(--danger);

    > .#{$ns}Panel-heading {
      background: var(--danger);
      color: var(--white);

      .badge {
        color: var(--danger);
        background: var(--white);
      }
    }

    > .#{$ns}Panel-heading,
    > .#{$ns}Panel-footer {
      border-color: var(--danger);
    }
  }

  /* 子组件 */
  &-heading {
    padding: var(--Panel-headingPadding);
    border-bottom: var(--Panel-headingBorderBottom);
    border-radius: var(--Panel-headingBorderRadius);
  }

  &-title {
    margin-top: var(--Panel-titleMarginTop);
    margin-bottom: var(--Panel-titleMarginBottom);
    font-size: var(--Panel-titleFontSize);
    color: var(--Panel-titleColor);
  }

  &-body {
    padding: var(--Panel-bodyPadding);
  }

  &-footer {
    border-color: var(--Panel-footerBorderColor);
    border-radius: var(--Panel-footerBorderRadius);
    background: var(--Panel-footerBg);
    padding: var(--Panel-footerPadding);
    border-style: solid;
    border-width: var(--Panel-borderWidth) 0 0 0;
    clear: both;

    .#{$ns}Button + .#{$ns}Button {
      margin-left: var(--Panel-footerButtonMarginLeft);
    }
  }

  &-btnToolbar {
    @include clearfix();
    text-align: var(--Panel-btnToolbarTextAlign);

    .#{$ns}Button {
      margin-left: var(--Panel-footerButtonMarginLeft);
    }

    &:empty {
      display: none;
    }
  }
}