@import 'variables/breakpoints';
@import 'variables/gutters';
@import 'variables/navigation';
@import 'variables/z-index';

.msfa {
  position: relative;
  display: grid;
  min-height: 100vh;
  grid-template-columns: 12rem 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    'header header'
    'sidebar content'
    'footer footer';

  &__header {
    grid-area: header;
    position: sticky;
    top: 0;
    z-index: $msfa__z-index-header;
  }

  &__sidebar {
    grid-area: sidebar;
    background-color: var(--digi--ui--color--background--secondary);
    border-right: 1px solid var(--digi--ui--color--background--off);
  }

  &__content {
    grid-area: content;
    max-width: $digi--layout--breakpoint--l;
    padding: $digi--layout--gutter--l $digi--layout--gutter--l $digi--layout--gutter--xxl;
  }

  &__breadcrumbs {
    display: block;
    margin-bottom: $digi--layout--gutter;
  }

  &__footer {
    grid-area: footer;
    background-color: var(--digi--ui--color--primary);
  }
}
