apps/barista-design-system/src/app/components/nav/nav.scss
@import '../../../../../libs/barista-components/core/src/style/colors';
@import '../../../styles/global/mixins.scss';
@import '../../../styles/global/variables.scss';

$nav-search-width: 400px;
$nav-line-height: 2.75rem;
$nav-primary-background: $gray-860;
$nav-primary-current: $gray-700;
$nav-primary-hover: $gray-700;
$nav-current-mobile: $gray-600;

.ba-nav {
  display: block;
  height: $nav-line-height;
  background-color: $nav-primary-background;
  position: relative;
}

.ba-nav-bar {
  position: absolute;
  z-index: 10;
  width: 0;
  overflow: hidden;
  top: 0;
  right: 0;
  padding-top: $nav-line-height;
  background-color: $nav-primary-background;
  transition: width 125ms ease-out;
}

.ba-nav-bar-active {
  width: 100%;
}

@media (min-width: $screen-md) {
  .ba-nav-bar {
    position: relative;
    overflow: visible;
    width: auto;
    padding-top: 0;
    transition: none;
    display: flex;
    justify-content: space-between;
  }

  .ba-nav-bar-active {
    width: auto;
  }
}

/*
* Brand logo
*/

.ba-nav-brand {
  position: absolute;
  z-index: 12;
  top: 0.7rem;
  left: 14px; /* Align with first breadcrumbs item. */
  width: 7rem;
}

.ba-nav-logo {
  max-width: 100%;
}

/*
* Nav lists & items
*/

.ba-nav-list {
  @include list-reset();
  margin: 0;
}

.ba-nav-item {
  margin: 0;
  white-space: nowrap;
}

.ba-nav-link {
  color: $gray-200;
  text-decoration: none;
  outline: 0;
  display: block;
  padding: 0.5rem 1rem;
}

.ba-nav-link:visited {
  color: $gray-200;
}

.ba-nav-link:hover {
  color: #ffffff;
  text-decoration: none;
}

.ba-nav-link-active {
  background-color: $nav-current-mobile;
}

@media (min-width: $screen-md) {
  .ba-nav-list {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: $nav-line-height;
    padding-left: 8.75rem;
    overflow: hidden;
  }

  .ba-nav-item,
  .ba-nav-link {
    line-height: 1em;
    height: $nav-line-height;
  }

  .ba-nav-link {
    padding: 0.85rem 1.5rem;
  }

  .ba-nav-item {
    position: static;
  }

  .ba-nav-link-active {
    background-color: $nav-primary-current;
  }

  .ba-nav-item .ba-nav-link {
    padding-left: 1.5rem;
  }

  .ba-nav-item .ba-nav-link:hover {
    background-color: $nav-primary-current;
  }

  /* pull nav item right */
  .ba-nav-item-right {
    margin-left: auto;

    ~ .ba-nav-item-right {
      margin-left: 0;
    }
  }
}

/* nav modifier */
.ba-nav-bar-active .ba-nav-list {
  background-color: $nav-primary-current;
}

@media (min-width: $screen-md) {
  .ba-nav-bar-active .ba-nav-list {
    background-color: $nav-primary-background;
  }
}

/*
* Nav buttongroup:
* Search, Menu toggle
*/

.ba-nav-buttongroup {
  position: absolute;
  bottom: 0;
  right: 0;
  height: $nav-line-height;
  display: flex;
  justify-content: flex-end;
  z-index: 12;
}

.ba-nav-btn {
  color: #ffffff;
  font-size: 1em;
  font-family: inherit;
  appearance: none;
  background-color: transparent;
  border: 0;
  outline: 0;
  cursor: pointer;
  line-height: $nav-line-height;
  height: $nav-line-height;
  padding: 0 1.5rem;
  vertical-align: top;
  display: inline-block;
}

.ba-nav-btn:visited {
  color: #ffffff;
  background-color: transparent;
}

.ba-nav-btn:hover {
  color: #ffffff;
  background-color: $nav-primary-hover;
  text-decoration: none;
}

.ba-nav-btn:focus,
.ba-nav-link:focus {
  @include focusStyle();
}

@media (min-width: $screen-md) {
  .ba-nav-btn-menutoggle {
    display: none;
  }
}

@media (min-width: $screen-md) {
  body::after {
    content: 'widescreen';
    display: none;
  }
}
