.toolbar-spacer {
  flex: 1 1 auto;
}

// --------- NAVIGATION
nav {
  display: block;
  position: fixed;
  inset: 0 0 auto 0;
  background: var(--mat-sys-surface);
  z-index: 10;
  --progress: 0;

  &:before {
    content: ' ';
    position: absolute;
    inset: 0;
    opacity: var(--progress);
    box-shadow: 0 0px 15px rgba(19 55 81 / 20%), 0 0px 4px rgba(19 55 81 / 20%), 0 5px 10px rgba(19 55 81 / 20%);
    pointer-events: none;
    transition: opacity .4s cubic-bezier(.17,.84,.44,1);
  }

  .nav-items {
    display: flex;

    .menu-link {
      display: block;
      margin: calc((170px - var(--progress)*100px - 40px)/2) 5px;
      padding: 0 20px;
      color: var(--primary-color);
      border-radius: 3px;
      text-decoration: none;
      line-height: 40px;
      font-size: 20px;
      font-weight: 300;
      transition: color .2s, background-color .2s, margin .4s cubic-bezier(.17,.84,.44,1);

      &:hover {
        text-decoration: none;
        background-color: var(--primary-color);
        color: white;
      }
    }

    .branding {
      display: flex;

      .logo {
        display: block;

        img {
          display: block;
          height: calc(100px - var(--progress)*50px);
          margin: 10px 0;
          transition: height .4s cubic-bezier(.17,.84,.44,1);
        }

        .title-under {
          position: relative;
          height: calc(50px - var(--progress)*50px);
          color: var(--light-gray-text);
          font-size: 26px;
          letter-spacing: 8px;
          overflow: hidden;
          transition: height .4s cubic-bezier(.17,.84,.44,1);

          .wrapper {
            position: absolute;
            bottom: 0;
            padding-bottom: 10px;
          }
        }
      }

      .title-beside {
        position: relative;
        font-size: 22px;
        font-weight: 700;
        width: calc(var(--progress) * 180px);
        color: var(--primary-color);
        overflow: hidden;
        transition: width .4s cubic-bezier(.17,.84,.44,1);

        .wrapper {
          display: block;
          position: absolute;
          right: 0;
          padding-top: 25px;
          box-sizing: border-box;
        }
      }
    }

    .separator {
      flex: 1;
    }
  }

  &[mobile] {
    .nav-items {
      position: relative;
      display: block;
      text-align: center;

      .nav-item.branding {
        display: inline-flex;

        .logo {
          img {
            height: calc(100px - var(--progress)*60px);;
          }
        }

        .title-beside {
          width: calc(var(--progress) * 130px);
          font-weight: 500;
          font-size: 18px;

          .wrapper {
            padding-top: 23px;
          }
        }
      }
    }
  }
}

// ----------------- FOOTER
footer {
  background-color: var(--primary-color);
  text-align: center;

  &>.wrapper {
    padding: 100px 0;
    text-align: center;

    .main-logos {
      display: flex;
      justify-content: center;
      gap: 30px;

      .logo {
        img {
          height: 100px;

          @media screen and (max-width: 960px) {
            height: 50px;
          }
        }
      }
    }

    p {
      margin-top: 20px;
      padding-top: 20px;
      color: white;
      font-weight: 300;
      border-top: 1px solid white;
    }
  }
}