department-of-veterans-affairs/vets-website

@import "~@department-of-veterans-affairs/formation/sass/shared-variables";

$nav-width-bar-max-width: 720px;
$nav-mobile-breakpoint: 650px;

.mhv-c-sec-nav-bar-row {
  justify-content: space-around;
  max-width: $nav-width-bar-max-width;
}

.mhv-c-sec-nav-item {
  height: 60px;

  a, a:visited, a:active, abbr {
    color: var(--vads-color-white);
    border-radius: 5px;
  }

  a:hover {
    color: var(--vads-color-primary-darker);
    background-color: rgba(255, 255, 255, 0.6);
  }

  va-icon {
    padding-right: 0.25rem;
    padding-bottom: 0.25rem;
    vertical-align: middle;
  }
}

.mhv-u-sec-nav-header-style a {
    padding: 8px 7px 11px;
    min-width: 170px;
}

.mhv-u-sec-nav-item-style a {
    padding: 11px 7px 12px;
    min-width: 75px;
}

.mhv-u-sec-nav-active-style {
  a {
    background-color: var(--vads-color-white);
    border-radius: 5px;
  }

  a, a:visited, a:active, abbr {
    color: var(--vads-color-primary);
  }

  a:hover {
    color: var(--vads-color-primary-darker);
  }
}

// Mobile view
@media (max-width: $nav-mobile-breakpoint) {
  .mhv-u-sec-nav-header-style {
    flex: 0 0 100%;
    height: 50px;

    a, a:hover, a:visited, a:active {
      display: block;
      border-radius: 0px;
      padding: 9px 7px;
    }

    // Show the header item as a white bar when active
    &.mhv-u-sec-nav-active-style {
      color: var(--vads-color-primary);
      background-color: var(--vads-color-white);
    }
  }

  .mhv-u-sec-nav-item-style {
    a {
      // Make the icon appear on top of the text
      display: grid;
      justify-items: center;
      padding: 4px 7px;
    }

    va-icon {
      display: contents;
    }
  }
}

// Show the abbreviation instead of the long title
@media (max-width: $small-screen) {
  .mhv-u-sec-nav-item-title {
    display: none;
  }
}

// Show the title instead of the abbreviation
@media (min-width: $small-screen) {
  .mhv-u-sec-nav-short-title {
    display: none;
  }

  .mhv-u-sec-nav-item-title {
    display: inline;
  }
}