// Panels
// ==========================================================================

.panel {
  @include box-sizing(border-box);
  @extend %contain-floats;
  clear: both;
  border-left-style: solid;
  border-color: $border-colour;

  padding: em(15, 19);
  margin-bottom: em(15, 19);

  :first-child {
    margin-top: 0;
  }

  :only-child,
  :last-child {
    margin-bottom: 0;
  }
}

.panel-border-wide {
  border-left-width: 10px;
}

// Used to show the left edge of "toggled" content
.panel-border-narrow {
  border-left-width: 5px;
}

// Panels within form groups
// By default, panels have 15px bottom margin
.form-group .panel-border-narrow {
  float: left;
  width: 100%;
  // Remove the bottom padding as .form-group sets a bottom margin
  padding-bottom: 0;
  // Don't remove the bottom margin for all panels, assume they are often within stacked groups
}

// Note: This is incredibly fragile, and needs rebuilding.

// The first panel in a group
.form-group .panel-border-narrow:first-child {
  margin-top: 10px;
}

// The last panel in a group
.form-group .panel-border-narrow:last-child {
  margin-top: 0;
  margin-bottom: 0;
}

// For inline panels
.inline .panel-border-narrow,
.inline .panel-border-narrow:last-child {
  margin-top: 10px;
  margin-bottom: 0;
}

