// 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;

}