@use 'sass:color';
@use 'sass:math';
@use '../../theme';
@use '../../mixins';

%_SiteContent {
  $_SiteContent-backgroundColor: color.adjust(theme.$neutral-50, $alpha: -0.5);

  padding: theme.$spacer-s;
  margin: theme.$spacer-3xs;
  background-color: $_SiteContent-backgroundColor;
}

.Site {
  display: grid;
  grid-template:
    'Site-info   Site-content Site-nav'    2fr
    'Site-social Site-content Site-nav'    2fr
    'Site-social Site-content Site-subNav' 3fr
    'Site-title  Site-title   Site-title'  2fr
    / 1fr        3fr          1fr;
  max-inline-size: 100vi;
  max-block-size: 100vb;
  padding: theme.$spacer-3xl theme.$spacer-4xl;

  &-title {
    grid-area: Site-title;
    justify-self: end;
    padding-inline-end: theme.$spacer-s;
    font-family: theme.$fontFamily--display;
    font-size: theme.$fontSize-6;
    font-weight: normal;
  }

  &-nav {
    @extend %_SiteContent;

    --Site-nav-gridArea: Site-nav / Site-nav / Site-subNav / Site-nav;

    grid-area: var(--Site-nav-gridArea);
  }

  &-subNav {
    @extend %_SiteContent;

    grid-area: Site-subNav;
  }

  &-content {
    @extend %_SiteContent;

    grid-area: Site-content;
    padding: theme.$spacer-m;
    overflow: auto;

    @include mixins.flow;
  }

  &-info {
    @extend %_SiteContent;

    grid-area: Site-info;
  }

  &-social {
    @extend %_SiteContent;

    grid-area: Site-social;
  }
}
