// ============================================================================
// :: Section
// ============================================================================
/**
 * Scope defined for visualising the section layout in the layout section of
 * the styleguides.
 */

// ============================================================================
// :: Root
// ============================================================================
.s-section {

  .l-section {
    padding: 3rem;

    border: 0.1rem dashed black;
  }

  .l-section__header,
  .l-section__content,
  .l-section__footer {
    padding: 1.5rem;

    border: 0.1rem dashed darken($bp-border-color-base, 50%);
  }

  .l-section__header {
    align-items: stretch;
  }

  .l-section__header-content,
  .l-section__header-actions {
    padding: 1.5rem;

    border: 0.1rem dashed darken($bp-border-color-base, 20%);
  }

  .l-section__header-content {
    flex-grow: 1;
    margin-right: 1.5rem;
  }

  .l-section__header-actions {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .l-section__content {
    border: 0.1rem dashed darken($bp-border-color-base, 50%);

    .l-content {
      padding: 1.5rem;

      border: 0.1rem dashed darken($bp-border-color-base, 20%);
    }

    .l-content__item {
      padding: 1.5rem;

      border: 0.1rem dashed darken($bp-border-color-base, 20%);
    }
  }

  .l-section__footer {
    border: 0.1rem dashed darken($bp-border-color-base, 50%);
  }
}