@use 'sass:color';
@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'   4fr
    'Site-title  Site-title   Site-title' 2fr
    / 1fr       3fr         1fr;
  inline-size: 100%;
  block-size: 100%;
  padding: 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;

    grid-area: Site-nav;
  }

  &-content {
    @extend %_SiteContent;
    @include mixins.flow;

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

  &-info {
    @extend %_SiteContent;

    grid-area: Site-info;
  }

  &-social {
    @extend %_SiteContent;

    grid-area: Site-social;
  }
}
