/**
 * Panel:
 * `.Panel`: Generic panels are blocks of content that are chunked.
 * eg. A standalone chart or metric, a preview, etc
 *
 *     @example
 *     .Panel
 *       .header.Panel-header
 *         h1.Panel-heading Header with no body
 *
 *     .Panel
 *       header.Panel-header
 *         h1.Panel-heading Panel Heading
 *       .Panel-body
 *         p Panel body
 *       .Panel-footer
 *         a Panel Footer
 *
 *     .Panel
 *       header.Panel-header
 *         h1.Panel-heading Panel Heading
 *       .Panel-body
 *         .Section
 *           .Section-header
 *             .Section-heading Section 1
 *           .Section-body
 *             Section body
 *       .Panel-body
 *         .Section
 *           .Section-header
 *             .Section-heading Section 2
 *           .Section-body
 *             Section body
 *       .Panel-footer
 *         a Panel Footer
 */

@import "./config";
@import "../border/index";

.Panel {
  #celery.default-border;
  margin-bottom: @panel-margin * 1.5;

  &:last-child {
    margin-bottom: 0;
  }
}

.Panel--inline {
  display: inline-block;
}

.Panel-header {
  padding: @panel-gutter-size;
  padding-top: @panel-gutter-size * 0.7;
  padding-bottom: @panel-gutter-size * 0.7;
  border-bottom: @border-base;

  &:last-child {
    border-bottom: 0;
  }

  & > * {
    vertical-align: middle;
  }
}

.Panel-heading {
  font-size: @panel-heading-font-size;
  line-height: @panel-heading-line-height;
  color: @panel-heading-color;
}

.Panel-heading--inline {
  .Header-heading--inline
}

.Panel-headingIcon {
  margin-right: @grid-gutter-width;
}

.Panel-heading--small {
  font-size: @panel-heading-small-font-size;
  text-transform: uppercase;
}

.Panel-heading--light {
  color: @panel-heading-color-light;
}

.Panel-subheading {
  font-size: @panel-subheading-font-size;
  line-height: 1.4em;

  &:not(:first-child) {
    margin-top: @grid-gutter-width;
  }
}

.Panel-header--divisor {
  border-top: 1px solid @input-border-color;
  margin-top: @panel-gutter-size;
}

.Panel-body {
  padding: @panel-gutter-size;
  padding-top: @panel-gutter-size * 0.7;
  padding-bottom: @panel-gutter-size * 0.7;

  & + & {
    border-top: @border-base;
  }
}

.Panel-divider {
  border-bottom: @border-base;
  border-top: 0;
  margin: @panel-gutter-size - 10 0;
}

.Panel-footer {
  border-top: 1px solid @input-border-color;
  padding: @panel-gutter-size;
  padding-top: @panel-gutter-size * 0.7;
  padding-bottom: @panel-gutter-size * 0.7;
}