/* ==========================================================================
 * Navigation
 * ========================================================================== */

.mds-is-nav-expanded {
  .mds-c-subnav {
    z-index: 2;
  }
}

.mds-is-subnav-minimized {
  .mds-c-layout {
    padding-left: var(--mds-d-spacing--xl);
  }
}

.mds-c-navigation {
  backface-visibility: hidden;
  background-color: var(--mds-t-background-color--primary);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  position: relative;
  width: $navigation-width--sm;
  z-index: $z-index--navigation;

  &--transition {
    transition: all 175ms cubic-bezier(0.175, 0.885, 0.32, 1.275);

    .mds-c-global-nav__label,
    .mds-c-info-card__info {
      opacity: 1;
    }

    .mds-c-global-nav__label {
      transition: opacity 225ms ease-out;
    }

    .mds-c-info-card__info {
      transition:
        opacity 225ms cubic-bezier(0.86, 0, 0.07, 1),
        width 175ms cubic-bezier(0.86, 0, 0.07, 1);
    }

    .mds-is-nav-collapsed & {
      transition: all 175ms cubic-bezier(0.23, 1, 0.32, 1);

      .mds-c-info-card__info,
      .mds-c-global-nav__label {
        opacity: 0;
      }
    }
  }

  /* Default Loading Width on Large Screens */
  @media screen and (min-width: 768px) {
    width: $navigation-width--lg;
  }

  /* Narrow when Collapsed */
  .mds-has-subnav &,
  .mds-is-nav-collapsed & {
    width: $navigation-width--sm;
  }

  .mds-is-nav-expanded & {
    width: $navigation-width--lg;
  }

  &__header {
    align-items: center;
    background-color: rgb(0 0 0 / 25%);
    display: flex;
    flex-shrink: 0;
    height: 4.25rem;
    padding: var(--mds-d-spacing--lg) var(--mds-d-spacing--med);
  }

  &__logo {
    border-radius: var(--mds-d-border-radius--default);
    display: flex;
    height: 100%;
    justify-content: center;
    width: calc($navigation-width--sm - (var(--mds-d-spacing--med) * 2));

    > img {
      width: calc(2rem + var(--mds-d-spacing--xs));
    }

    &:hover,
    &:focus-visible {
      outline: 2px solid var(--mds-t-border-color-inverse-accent);
      outline-offset: 4px;
    }
  }

  &__main {
    @mixin mds-m-scroll-vertical;

    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: var(--mds-d-spacing--xl) var(--mds-d-spacing--lg);

    &::-webkit-scrollbar {
      display: none;
    }
  }

  &__footer {
    border-top: 1px solid var(--mds-t-border-color--secondary);
    flex-shrink: 0;
    padding: var(--mds-d-spacing--lg);
  }
}

@media (max-width: $reflow-zoom-level--150) {
  .mds-c-navigation {
    &__header {
      max-height: 3.75rem;
    }

    .mds-is-nav-expanded & {
      bottom: 0;
      left: 0;
      position: absolute;
      top: 0;
    }
  }

  .mds-has-subnav,
  .mds-is-subnav-minimized {
    .mds-c-layout {
      padding-left: var(--mds-d-spacing--xl);
    }
  }

  .mds-is-nav-expanded {
    .opus-nav-parent-container {
      min-width: 0 !important;
      position: relative;
    }

    .mds-c-layout {
      padding-left: calc($navigation-width--sm + var(--mds-d-spacing--xl));
    }
  }

  .mds-has-subnav:not(.mds-is-subnav-minimized) {
    .opus-nav-parent-container {
      min-width: $navigation-width--sm !important;
      width: $navigation-width--sm;
    }
  }

  .mds-is-nav-collapsed {
    .mds-c-navigation--transition {
      transition: none;
    }
  }
}

/* At 250% zoom on a 1280px screen, the effective CSS width is about 512px. */
@media (max-width: $reflow-zoom-level--250) {
  .mds-c-navigation {
    &__header {
      max-height: 3rem;
    }

    &__footer {
      .mds-c-info-card__title.mds-c-info-card__title--truncate,
      .mds-c-info-card__subtitle.mds-c-info-card__subtitle--truncate {
        white-space: nowrap;
      }
    }
  }

  .opus-nav-parent-container {
    .mds-c-subnav {
      max-width: 10rem;

      .mds-c-subnav__header {
        padding: 0;
      }

      .mds-c-menu {
        .mds-c-menu__text {
          white-space: normal;
        }
      }
    }
  }

  .mds-is-nav-expanded {
    .mds-c-navigation {
      width: calc($navigation-width--sm + 10rem);
    }
  }
}

/* 
  Add WCAG Reflow Compliance 
  At 400% zoom on a 1280px screen, the effective CSS width is about 320px.
*/

$header-height--reflow: 3rem;
@media (max-width: $reflow-zoom-level--400) {
  .mds-c-application__layout {
    .opus-nav-parent-container {
      z-index: $z-index--navigation;

      .mds-c-navigation {
        height: fit-content;
        width: fit-content;

        .mds-c-navigation__header {
          height: $header-height--reflow;
          max-height: $header-height--reflow;
          padding: var(--mds-d-spacing--xs);
          width: auto;

          .mds-c-navigation__logo {
            outline-offset: 0;
            width: 2rem;
          }
        }

        .mds-c-navigation__main {
          max-height: calc(100vh - 7rem);
        }
      }

      .mds-c-subnav {
        left: 0;
        top: $header-height--reflow;
        width: 2.5rem;

        &:has(> .mds-c-subnav__header) {
          height: calc(100vh - $header-height--reflow);
          min-width: 8rem;
          width: auto;
        }
      }
    }

    /* Collapsed Navigation Styles */
    &.mds-is-nav-collapsed {
      .opus-nav-parent-container {
        .mds-c-navigation {
          .mds-c-navigation__main,
          .mds-c-navigation__footer {
            display: none;
          }
        }
      }

      .mds-c-layout {
        left: 2.5rem;
        padding-left: 0;
        position: sticky;
        top: 0;
      }
    }

    &.mds-is-nav-expanded {
      .opus-nav-parent-container {
        position: absolute;
      }

      .mds-c-layout {
        padding-left: calc(
          var(--mds-d-spacing--xxl) + var(--mds-d-spacing--sm)
        );
      }
    }

    &.mds-has-subnav {
      .opus-nav-parent-container {
        left: 0;
        min-width: 2.5rem !important;
        position: sticky;
        top: 0;
        width: 2.5rem;
      }

      .mds-c-main-content {
        left: 2.5rem;
      }
    }
  }
}