/*
 * Bootstrap Panel Overrides
 * --------------------------------------------------
 */

.panel {
  border-style: none;
  .shade;
  &:last-child {
    margin-bottom: .px-rem(20px)[];
  }
}
.panel-heading {
  border-style: none;
  .shade-light;
}
// TODO: See if we can retire this for a new .img-panel class //
.panel img {
  width: 100%;
  height: auto;
  .shade;
}
.panel .embed-responsive {
  .shade;
  z-index: 1;
}
/* Allow responsive embeds to go full width (limited in embed-responsive partial) */
.panel .embed-responsive-4by3,
.panel .embed-responsive-16by9 {
  max-width: none;
}

.panel-body {
  line-height: @line-height-base;
  position: relative;
}
h1.panel-title { font-size: @font-size-h3; }
h2.panel-title { font-size: @font-size-h3; }
h3.panel-title { font-size: @font-size-h3; }

.panel-default .panel-title {
  font-weight: 600;
  font-size: .px-rem((unit((16 * 17 / 14), px)))[];
}

.panel > .list-group {
  list-style: none;
  border-style: none;
}
.panel > .list-group .list-group-item {
  border-style: none;
}

/* Panel groups (accordion) overrides */
.panel-group .panel-title {
  font-weight: 600;
}
.panel-group .panel-heading {
  padding-top: .px-rem(10px)[];
}
.panel-group .panel-primary > .panel-heading {
  &:hover {
    background-color: darken(@panel-primary-heading-bg, 5%);
  }
  .panel-title,
  a {
    display: block;
  }
}
.panel-group .panel-default > .panel-heading {
  &:hover {
    background-color: darken(@panel-default-heading-bg, 5%);
  }
  .panel-title,
  a {
    display: block;
  }
}
.panel-group .panel-heading + .panel-collapse .panel-body {
  border-top: none;
}
.panel-group .panel-default .panel-heading {
  background-color: @panel-default-heading-bg;
}

// stylelint-disable font-family-no-missing-generic-family-keyword
.panel [data-toggle="collapse"] {
  &:before {
    content: "\e082";
    font-family: 'Glyphicons Halflings';
    vertical-align: sub;
    padding-right: .px-rem(20px)[];
    display:inline-block;
  }
  &[aria-expanded="false"],
  &.collapsed,
  &.collapse.in {
    &:before {
      content: "\e081";
    }
  }
}
// stylelint-enable

.panel-collapse,
.panel-group .panel-heading .panel-title a {
  padding-left: .px-rem(40px)[];
  &[data-toggle="collapse"] {
    padding-left: 0;
  }
}

.panel.panel-group {
  padding: .px-rem(20px)[];
  .panel {
    margin-top: 0;
    .box-shadow(none);
  }
  .panel > .panel-heading {
    background: none;
  }
}

.panel figure {
  margin-bottom: 0;
  .box-shadow(none);

  figcaption {
    background-color: @gray-lighter;
  }
}

/* Provide an indented section within a panel-body */
.panel-body-offset {
  padding-left: .75em;
  border-left: solid 2px @brand;
  margin-left: 2em;
}
/* Reset bottom margins to ensure red line is vertically centred */
.panel-body > &,
.panel-body-offset > & {
  p:last-child,
  dl:last-child,
  ol:last-child,
  ul:last-child {
    margin-bottom: 0;
  }
}

/* Support vertical alignment of glyphicon before panel-body-offset */
.panel-body-offset-marker {
  position: absolute;
  left: .px-rem(20px)[];
  top: 50%;
  margin-top: -.5em;
}

/* A clickable panel - one link makes the whole panel active for it */
.panel-linked {
  position: relative;

  // Keep other links on top of our panel link so they still work.
  & a {
    position: relative;
    z-index: 2;
  }

  // Extend the link's "before" region to cover the whole panel.
  .panel-link {
    position: static;
    &:before {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      content: "";
      white-space: nowrap;
      overflow: hidden;
      z-index: 1;
    }
  }
}
