@use "pix-design-tokens/breakpoints";

.pix-app-layout {
  display: grid;
  grid-template-areas:
    "banner banner"
    "navigation main"
    "navigation footer";
  grid-template-rows: min-content 1fr;
  grid-template-columns: min-content 1fr;
  min-height: 100dvh;

  @include breakpoints.device-is('mobile') {
    display: flex;
    flex-direction: column;
  }

  &__banner {
    position: sticky;
    top: 0;
    z-index: 900;
    grid-area: banner;
  }

  &__navigation {
    position: sticky;
    bottom: var(--pix-spacing-6x);
    z-index: 1;
    grid-area: navigation;
    min-height: calc(100vh - var(--pix-spacing-6x));
    margin: auto 0 0;
    padding: calc(var(--pix-app-layout-top) + var(--pix-spacing-6x)) 0 0 var(--pix-spacing-6x);

    @include breakpoints.device-is('mobile') {
      position: unset;
      z-index: auto;
      min-height: auto;
      margin: unset;
      padding: var(--pix-spacing-2x) var(--pix-spacing-2x) 0 var(--pix-spacing-2x);
    }
  }

  &__main, &__footer {
    width: 100%;
    max-width: min(calc(100vw - var(--pix-navigation-width) - 3 * var(--pix-spacing-6x)), 93rem);
    margin: 0 auto;
    padding: 0 var(--pix-spacing-6x);

    @include breakpoints.device-is('mobile') {
      max-width: none;
      padding: 0 var(--pix-spacing-2x);
    }
  }

  &__main {
    grid-area: main;
    padding-top: var(--pix-spacing-6x);

    @include breakpoints.device-is('mobile') {
      margin-bottom: auto;
      padding-top: var(--pix-spacing-2x);
    }
  }

  &__footer {
    grid-area: footer;
    padding-bottom: var(--pix-spacing-6x);

    @include breakpoints.device-is('mobile') {
      padding-bottom: var(--pix-spacing-2x);
    }
  }



  &--admin {
    background-color: var(--pix-primary-10);

    --pix-navigation-color: var(--pix-primary-900);
    --pix-navigation-text-color: var(--pix-neutral-0);
  }

  &--orga {
    background-color: var(--pix-orga-50);

    --pix-navigation-color: var(--pix-orga-500);
    --pix-navigation-text-color: var(--pix-neutral-0);
  }

  &--certif {
    background-color: var(--pix-certif-50);

    --pix-navigation-color: var(--pix-certif-500);
    --pix-navigation-text-color: var(--pix-neutral-0);
  }

  &--primary {
    background-color: var(--pix-primary-10);

    --pix-navigation-color: var(--pix-primary-700);
    --pix-navigation-text-color: var(--pix-neutral-0);
  }

  &--modulix {
    background-color: var(--pix-neutral-0);

    --pix-navigation-color: var(--pix-primary-10);
    --pix-navigation-text-color: var(--pix-neutral-800);
    --pix-navigation-width: 88px;
    --pix-navigation-mobile-button-color: var(--pix-neutral-800);
  }
}