// Styling for the navbar
#mainNav {
  border-color: fade-out($gray-darker, 0.95);
  background-color: white;
  @include transition-all;
  @include heading-font;
  .navbar-brand {
    color: $theme-primary;
    @include heading-font;
    &:hover,
    &:focus {
      color: darken($theme-primary, 10%);
    }
  }
  .navbar-toggler {
    font-size: 12px;
    padding: 8px 10px;
    color: $gray-darker;
  }
  .navbar-nav {
    > li {
      > a {
        font-size: 11px;
        @include alt-font;
        &.active {
          color: $theme-primary !important;
          background-color: transparent;
          &:hover {
            background-color: transparent;
          }
        }
      }
      > a,
      > a:focus {
        color: $gray-darker;
        &:hover {
          color: $theme-primary;
        }
      }
    }
  }
  @media (min-width: 992px) {
    border-color: transparent;
    background-color: transparent;
    .navbar-brand {
      color: fade(white, 70%);
      &:hover,
      &:focus {
        color: white;
      }
    }
    .navbar-nav > li > a,
    .navbar-nav > li > a:focus {
      color: fade-out(white, 0.3);
      &:hover {
        color: white;
      }
    }
    &.navbar-shrink {
      border-color: fade-out($gray-darker, 0.9);
      background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
      .navbar-brand {
        color: white;
        &:hover,
        &:focus {
          color: $theme-primary;
        }
      }
      .navbar-nav > li > a,
      .navbar-nav > li > a:focus {
        color: white;
        &:hover {
          color: $theme-primary;
        }
      }
    }
  }
  .text {
    color: $theme-primary;
    position: fixed;
    transform: translateX(-50%) translateY(-45%);
    list-style: none;
    border-bottom: 0;
  }

  .text.hidden {
    border-bottom: 1px solid #fff;
  }

  .text li {
    float: left;
    font-weight: 100;
    font-size: 1.5em;
    color: $theme-primary;
    opacity: 1;
    transition: all 1.5s ease-in-out;
    max-width: 2em;
  }
  .text.hidden li.spaced {
    padding-left: 0;
  }
  .text li.spaced {
    padding-left: 0.5em;
  }

  .text.hidden li.ghost {
    opacity: 0;
    max-width: 0;
  }
}
