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

// ============================================================================
// :: Root
// ============================================================================
.s-root {
  .l-root {
    padding: 3rem;

    border: 0.1rem dashed black;
  }

  .l-root__header {
    height: 7rem;
    margin-bottom: 5rem;

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

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

    @include respond-to($bp-breakpoint-tablet-base) {
      margin-top: 5rem;
      height: 5rem;
    }

    @include respond-at($bp-breakpoint-tablet-base) {
      margin-right: 3rem;
    }
  }

  .l-root__view {
    width: 100%;

    padding: 3rem;

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

    @include respond-at($bp-breakpoint-tablet-base) {
      height: calc(100vh - 6rem);
    }
  }

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