// Navbar
// -----------------------------------------------
// -----------------------------------------------

#navigation {
  background: $white-color;
  padding: $base-point-grid * 2 0;
  font-family: $title-font-family;
  height: $top-bar-size;
  display: flex;
  flex: 0 0 56px;

  a {
    color: $text-color;
  }

  .navbar-wrapper {
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    width: 100%;

    .navigation-brand {
      font-size: 18px;

      .brand {
        display: inline-flex;
        align-items: center;

        &:hover {
          background: none;
        }

        .icon-wrapper {
          width: 36px;
          height: 36px;
          margin-right: $base-point-grid;
        }
        @keyframes subtle-transition {
          80% {
            background-color: $brand-primary;
          }

          95% {
            background-color: $text-color;
          }
        }
        .brand-title {
          position: absolute;
          font-weight: 500;
          white-space: nowrap;
          left: 70px;
        }
      }

      .custom-feature-icon {
        .icon-wrapper{
          background: url("../img/light-navbar-brand.svg") no-repeat;
        }
      }

      .background-mask {
        .icon-wrapper {
          -webkit-mask: url("../img/light-navbar-brand.svg") no-repeat;
          mask: url("../img/light-navbar-brand.svg") no-repeat;
          background-color: $brand-primary;
          animation: subtle-transition 6.66s infinite linear;
        }
      }
    }

    .navigation-menu {
      > ul > li:not(:first-child) {
        margin-left: ($base-point-grid * 3);
      }

      li {
        display: inline-block;
        list-style: none;

        a span {
          &:focus,
          &:hover {
            border-bottom: 2px solid;
          }
        }

        a i {
          &:focus,
          &:hover {
            opacity: 0.7;
          }
        }
      }

      .nav-item-text {
        & + .nav-item-text {
          margin-left: $base-point-grid;
        }

        @include bp(medium) {
          display: none;
        }
      }

      .nav-item-icon {
        display: none;
        @include bp(medium) {
          display: inline-block;
        }
      }

      .search-nav {
        @include bp(medium) {
          display: none;
        }
      }
    }
  }
}
