////
/// @group components
////

/// A panel is a container for visually separating content.
/// Often used within a sidebar.
/// @since 0.1.0
.panel {
  background: $colour-panel-light;
  padding: 1em;

  &--dark {
    background: $colour-panel-dark;
    color: $colour-text-reverse;
  }
}

////
/// @group components
////

/// A panel is a container for visually separating content.
/// Often used within a sidebar.
/// @since 0.1.0
.panel {
  background: $colour-panel-light;
  margin: em($spacing-medium 0 $spacing-large);
  padding: em($spacing-medium);

  &--dark {
    background: $colour-panel-dark;
    color: $colour-text-reverse;
  }

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

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

Update panel styles to use spacing variables
Update panel styles to use spacing variables
