/**
  * @stylesheet panels.less Panels
  * @parent styles-base 19
  *
  * While not always necessary, sometimes you need to put your DOM in a box. For those situations, try the panel component.
  *
  * ## Basic example
  * By default, all the `.panel` does is apply some basic border and padding to contain some content.
  *
  * ```
  * <div class="panel panel-default">
  *   <div class="panel-body">
  *      Basic panel example
  *   </div>
  * </div>
  * ```
  *
  * @demo demos/panels/demo.html
  *
  * ## Panel with heading
  * Easily add a heading container to your panel with `.panel-heading`. You may also include any `<h1>`-`<h6>` with a `.panel-title` class to add a pre-styled heading.
  *
  * For proper link coloring, be sure to place links in headings within `.panel-title`.
  *
  * @demo demos/panels-heading/demo.html
  *
  * ## Panel with footer
  * Wrap buttons or secondary text in `.panel-footer`. Note that panel footers do not inherit colors and borders when using contextual variations as they are not meant to be in the foreground.
  *
  * @demo demos/panels-footer/demo.html
  *
  * ## Contextual alternatives
  * Like other components, easily make a panel more meaningful to a particular context by adding any of the contextual state classes.
  *
  * @demo demos/panels-contextual/demo.html
  *
  * ## With tables
  * Add any non-bordered `.table` within a panel for a seamless design. If there is a `.panel-body`, we add an extra border to the top of the table for separation.
  *
  * @demo demos/panels-tables/demo1.html
  *
  * If there is no panel body, the component moves from panel header to table without interruption.
  *
  * @demo demos/panels-tables/demo2.html
  *
  * ## With list groups
  * Easily include full-width list groups within any panel.
  *
  * @demo demos/panels-list-groups/demo.html
**/


/**
* @styles var-panels Panels
* @parent variables.less
*
* `panels.less` variables for the color, padding, text, and border properties on panels.
*
**/

//== Panels
//
//##

@panel-bg:                    #fff;
@panel-body-padding:          15px;
@panel-heading-padding:       10px 15px;
@panel-footer-padding:        @panel-heading-padding;
@panel-border-radius:         @border-radius-base;

//* Border color for elements within panels
@panel-inner-border:          #ddd;
@panel-footer-bg:             #f5f5f5;

@panel-default-text:          @gray-dark;
@panel-default-border:        #ddd;
@panel-default-heading-bg:    #f5f5f5;

@panel-primary-text:          #fff;
@panel-primary-border:        @brand-secondary;
@panel-primary-heading-bg:    @brand-secondary;

@panel-success-text:          @state-success-text;
@panel-success-border:        @state-success-border;
@panel-success-heading-bg:    @state-success-bg;

@panel-info-text:             @state-info-text;
@panel-info-border:           @state-info-border;
@panel-info-heading-bg:       @state-info-bg;

@panel-warning-text:          @state-warning-text;
@panel-warning-border:        @state-warning-border;
@panel-warning-heading-bg:    @state-warning-bg;

@panel-danger-text:           @state-danger-text;
@panel-danger-border:         @state-danger-border;
@panel-danger-heading-bg:     @state-danger-bg;


.panel {
  .border;
  .border-radius(0);

  .panel-heading {
    border: none;
    .border-radius(0);
    color: @text-color;
    margin: -1px;

    .panel-title {
      font-weight: 400;

      a {
        display: block;

        &:hover {
          text-decoration: none;
        }
      }
    }
  }
  .panel-body.panel-collapse {
    .list-group {
      .list-group-item, .list-group-item:last-child, .list-group-item:first-child {
          border: 1px solid transparent;
          .border-radius(0);

        &:hover, &.active {
          border: 1px solid @alert-warning-border;
        }
      }
    }
  }
  &.panel-primary {
    .panel-heading {
      color: #fff;
    }
  }

  /**
  * @styles accordions Accordions
  *
  * Add the `accordion` class to a panel for additional styles when expanding/collapsing a panel. Allows for plus/minus icons. Use JavaScript to add/remove the class `collapsed` to change to a minus icon.
  * Note: because the icon is inserted as a pseudo element, padding will be removed from the heading. You have to put an `<a>` inside the heading like this:
  *
  * ```
  * <div class="panel-heading">
  *  <h3 class="panel-title">
  *   <a href="#">Step 1: Access to Justice</a>
  *  </h3>
  * </div>
  * ```
  *
  * @demo demos/panels-accordion/demo.html
  **/

  &.accordion {

    .panel-heading {
      padding: 0;

      a {
        padding: @grid-gutter-width/3 @grid-gutter-width/2 @grid-gutter-width/3 @grid-gutter-width/4;
        padding-left: 35px;

        &:before {
          .icon-font;
          content: '\e845';
          position: absolute;
          left: 10px;
        }
      }
    }
    &.collapsed {
      .panel-heading {
        background-color: #fff;
        .border;
        color: @gray-light;

        a:before {
          content: '\e831';
        }
      }
    }
  }
}