// @import  '../components/button/settings';
// @import  '../components/topbar/settings';
// @import  '../colors/settings';
// @import  'settings/topbar';
// @import  '../components/button/mixins';
// @import  '../tools/mixins/core';
// @import  '../tools/mixins/text-overflow';
// @import  '../tools/mixins/spacing';
// @import  '../typography/placeholders';
// @import  '~@momentum-ui/icons/scss/mixins';
// @import  '../../colors/settings';
// @import  '../../typography/settings';
// @import  '../../tools/functions/core';

@mixin topbar-hide-dropdown {
  // Makes an element visually hidden by default, but visible when focused.
  @include element-invisible();

  display: block;
}

@mixin topbar-show-dropdown {
  @include element-invisible-off();

  position: absolute !important; // Reset the position from static to absolute
  display: block;
}

@include exports('top-bar-ng') {
  .contain-to-grid {
    width: 100%;
    background: $topbar-bg;

    .top-bar {
      margin-bottom: $topbar-margin-bottom;
    }
  }
  // Wrapped around .top-bar to make it stick to the top
  .fixed {
    position: fixed;
    top: 0;
    z-index: $zindex-top-bar-fixed;
    width: 100%;
    #{$default-float}: 0;

    &.expanded:not(.top-bar) {
      width: 100%;
      height: auto;
      max-height: 100%;
      overflow-y: auto;

      .title-area {
        position: fixed;
        z-index: 99;
        width: 100%;
      }
      // Ensure you can scroll the menu on small screens
      .top-bar-section {
        z-index: 98;
        margin-top: $topbar-height;
      }
    }
  }

  .top-bar__transclude {
    flex: 1;
  }

  .top-bar {
    position: relative;
    display: flex;
    height: $topbar-height + rem-calc(2);
    margin-bottom: $topbar-margin-bottom;
    overflow: hidden;
    font-family: $brand-font-extra-light;
    color: $md-gray-30;
    background: $topbar-bg;
    // Topbar Global list Styles
    ul {
      padding: 0;
      margin: 0;
      list-style: none;
    }

    button {
      &:hover,
      &:focus {
        box-shadow: none;
      }
    }

    button.btn--header {
      position: relative;
      display: flex;
      height: $topbar-height + rem-calc(2);
      min-width: initial;
      padding: 0 1rem;
      font-size: 13px;
      background: 0 0;
      border: none;
      border-radius: 0;
      transition: all 350ms ease-in-out;
      align-items: center;

      div {
        display: flex;
        flex-direction: row;
      }

      &:hover,
      &:focus {
        color: $md-theme-50;
        background-color: $md-gray-10;

        .icon {
          color: $md-theme-50;
        }
      }

      .icon {
        font-size: 20px;
        vertical-align: middle;

        @media (min-width: 1070px) {
          padding-right: 0.5rem;
          color: $md-gray-30;
        }
      }
    }

    .left {
      display: inline-flex;
      margin-left: rem-calc(6);
      flex: 1;

      .top-bar__transclude {
        display: flex;
        height: $topbar-height;
        align-items: center;
      }
    }

    .right {
      display: inline-flex;

      ng-include:first-child button {
        border-left: 1px solid $top-bar-admin-border;

        .inverse & {
          border-left: 1px solid $top-bar-inverse-border;
        }
      }

      ng-include > div {
        vertical-align: top;
      }

      & button {
        vertical-align: top;
        border-left: 1px solid $top-bar-admin-border;

        .inverse & {
          border-color: $top-bar-inverse-border;
        }

        &:first-child {
          border-left: 1px solid $top-bar-admin-border;

          .inverse & {
            border-color: $top-bar-inverse-border;
          }
        }

        &:last-child {
          border-right: none;
        }
      }
    }

    .app-icon {
      margin: 0 22px 0 6px;
      font-size: 1.7rem;
      color: $md-theme-50;

      .inverse & {
        color: $md-gray-20;
      }
    }

    .user-info {
      height: $top-bar-height;

      .btn--user {
        height: rem-calc(52);
        padding: 7px 17px;
        cursor: pointer;
        background: 0 0;
        border: none;
        border-radius: 0;

        &:hover,
        &:focus {
          background: #eee;

          .user-name {
            color: $md-theme-70;

            .inverse & {
              color: $md-theme-70;
            }
          }

          .org-name {
            color: $md-theme-60;
          }
        }

        li {
          width: 128px;
          padding: 0;
          overflow: hidden;
          line-height: 1;
          text-align: left;
          text-overflow: ellipsis;
          white-space: nowrap;
          list-style: none;
        }

        .user-name {
          font-size: 13px;
          color: #383a41;

          .inverse & {
            color: $md-gray-30;
          }
        }

        .org-name {
          margin-top: 3px;
          font-size: 12px;
          color: $md-gray-40;
        }
      }

      .user-img {
        display: inline-block;
        width: 35px;
        height: 35px;
        overflow: hidden;
        text-align: center;
        vertical-align: middle;
        background-color: #d9d9d9;
        background-image: none;
        background-repeat: no-repeat;
        background-size: cover;
        border-radius: 50%;

        .icon {
          bottom: -5px;
          font-size: 30px;
          line-height: 35px;
          color: #fff;
        }
      }

      .user-info-text {
        display: none;

        @media (min-width: 960px) {
          display: inline-block;
          padding: 4px 0 4px 10px;
          margin: 0;
          text-align: left;
          vertical-align: middle;
        }
      }

      .dropdown-menu {
        top: calc(100% + 2px);
        right: -1px;
        left: auto;

        @media (min-width: 960px) {
          .org-name,
          .user-name,
          .divider {
            display: none;
          }
        }

        li {
          &.user-name,
          &.org-name {
            padding: 0 10px;
            line-height: 1;
            white-space: nowrap;
          }

          &.user-name {
            padding-top: 10px;
          }

          &.org-name {
            padding-bottom: 10px;
          }

          &.divider {
            margin: 0;
          }

          &.clickable {
            cursor: pointer;

            &:hover,
            &:focus {
              color: $md-white-100;
              text-decoration: none;
              background-color: $md-gray-20;
            }
          }
        }
      }
    }

    .settings-menu {
      .dropdown-menu {
        top: 100%;
        right: -1px;
        left: auto;

        &:after,
        &:before {
          right: 24px;
          left: auto;
        }
      }
    }

    .dropdown-menu {
      margin-top: 0;
      overflow: visible;
      font-size: 13px;
      border: none;
      border-top-right-radius: 0;
      border-top-left-radius: 0;
      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.18);

      li {
        padding: 0;
      }

      & > li:first-child > a,
      & > li:last-child > a,
      & > li:first-child > span,
      & > li:last-child > span {
        border-radius: 0;
      }
    }

    .row {
      max-width: none;
    }

    form,
    input,
    select {
      margin-bottom: 0;
    }

    input,
    select {
      height: $topbar-input-height;
      padding-top: 0.35rem;
      padding-bottom: 0.35rem;
      font-size: $topbar-button-font-size;
    }

    .button,
    button {
      padding-top: 0.35rem + rem-calc(1);
      padding-bottom: 0.35rem + rem-calc(1);
      margin-bottom: 0;
      font-size: $topbar-button-font-size;
      // position: relative;
      // top: -1px;
      // Corrects a slight misalignment when put next to an input field
      @media #{$small-only} {
        position: relative;
        top: -1px;
      }
    }
    // Title Area
    .title-area {
      position: relative;
      margin: 0;
    }

    .name {
      display: inline-flex;
      height: $topbar-height;
      padding-right: 1rem;
      padding-left: 1rem;
      margin: 0;
      font-size: $rem-base;
      align-items: center;

      h1,
      h2,
      h3,
      h4,
      p,
      span {
        margin: 0;
        font-size: $topbar-title-font-size;
        line-height: $topbar-height;

        a {
          display: block;
          width: 75%;
          padding: 0 $topbar-link-padding;
          font-weight: $topbar-title-weight;
          color: $topbar-link-color;
        }
      }
    }
    // Menu toggle button on small devices
    .toggle-topbar {
      position: absolute;
      top: 0;
      #{$topbar-menu-icon-position}: 0;

      a {
        position: relative;
        display: block;
        height: $topbar-height;
        padding: 0 $topbar-link-padding;
        font-size: $topbar-menu-link-font-size;
        font-weight: $topbar-menu-link-weight;
        line-height: $topbar-height;
        color: $topbar-link-color;
        text-transform: $topbar-menu-link-transform;
      }
      // Adding the class "menu-icon" will add the 3-line icon people love and adore.
      &.menu-icon {
        top: 50%;
        margin-top: -16px;

        a {
          @include hamburger(
            16px,
            false,
            0,
            1px,
            6px,
            $topbar-menu-icon-color,
            '',
            false
          );

          @if $text-direction==rtl {
            text-indent: -58px;
          }

          position: relative;
          height: 34px;
          padding: 0 ($topbar-link-padding + rem-calc(25)) 0
            $topbar-link-padding;
          line-height: 33px;
          color: $topbar-menu-link-color;
        }
      }
    }
    // Change things up when the top-bar is expanded
    &.expanded {
      height: auto;
      background: transparent;

      .title-area {
        background: $topbar-bg;
      }

      .toggle-topbar {
        a {
          color: $topbar-menu-link-color-toggled;

          span::after {
            // Shh, don't tell, but box-shadows create the menu icon :)
            // Change the color of the bars when the menu is expanded, using given thickness from hamburger() above
            box-shadow: 0 0 0 1px $topbar-menu-icon-color-toggled,
              0 7px 0 1px $topbar-menu-icon-color-toggled,
              0 14px 0 1px $topbar-menu-icon-color-toggled;
          }
        }
      }
      // Fixes an issue with Desktop and Mobile Safari where deeply-nested menus don't appear
      @media screen and (-webkit-min-device-pixel-ratio: 0) {
        .top-bar-section {
          .has-dropdown.moved > .dropdown,
          .dropdown {
            clip: initial;
          }
          // This was needed as parent ul's had padding, and the clip: was allowing content to peak through
          .has-dropdown:not(.moved) > ul {
            padding: 0;
          }
        }
      }
    }
  }
  // Right and Left Navigation that stacked by default
  .top-bar-section {
    #{$default-float}: 0;
    position: relative;
    width: auto;

    @include single-transition($default-float, $topbar-transition-speed);

    ul {
      display: block;
      width: 100%;
      height: auto;
      padding: 0;
      margin: 0;
      font-size: $rem-base;
    }

    .divider,
    [role='separator'] {
      width: 100%;
      height: 1px;
      clear: both;
      border-top: $topbar-divider-border-top;
    }

    ul li {
      background: $topbar-dropdown-bg;

      > a {
        display: block;
        width: 100%;
        padding: 12px 0 12px $topbar-link-padding;
        font-family: $topbar-link-font-family;
        font-size: $topbar-link-font-size;
        font-weight: $topbar-link-weight;
        color: $topbar-link-color;
        text-transform: $topbar-link-text-transform;
        padding-#{$default-float}: $topbar-link-padding;

        &.button {
          font-size: $topbar-link-font-size;
          padding-#{$default-float}: $topbar-link-padding;
          padding-#{$opposite-direction}: $topbar-link-padding;

          @include button-color($bg: $md-theme-50);
        }

        &.button.secondary {
          @include button-color($bg: $md-gray-70);
        }

        &.button.success {
          @include button-color($bg: $md-green-50);
        }

        &.button.alert {
          @include button-color($bg: $md-red-50);
        }

        &.button.warning {
          @include button-color($bg: $md-yellow-50);
        }

        &.button.info {
          @include button-color($bg: $md-mint-50);
        }
      }

      > button {
        font-size: $topbar-link-font-size;
        padding-#{$default-float}: $topbar-link-padding;
        padding-#{$opposite-direction}: $topbar-link-padding;

        @include button-color($bg: $md-theme-50);

        &.secondary {
          @include button-color($bg: $md-gray-70);
        }

        &.success {
          @include button-color($bg: $md-green-50);
        }

        &.alert {
          @include button-color($bg: $md-red-50);
        }

        &.warning {
          @include button-color($bg: $md-yellow-50);
        }

        &.info {
          @include button-color($bg: $md-mint-50);
        }
      }
      // Apply the hover link color when it has that class
      &:hover:not(.has-form) > a {
        color: $topbar-link-color-hover;
        background-color: $topbar-link-bg-color-hover;

        @if $topbar-link-bg-hover {
          background: $topbar-link-bg-hover;
        }
      }
      // Apply the active link color when it has that class
      &.active > a {
        color: $topbar-link-color-active;
        background: $topbar-link-bg-active;

        &:hover {
          color: $topbar-link-color-active-hover;
          background: $topbar-link-bg-active-hover;
        }
      }
    }
    // Add some extra padding for list items contains buttons
    .has-form {
      padding: $topbar-link-padding;
    }
    // Styling for list items that have a dropdown within them.
    .has-dropdown {
      position: relative;

      > a {
        &:after {
          @if $topbar-arrows {
            @include css-triangle(
              $topbar-dropdown-toggle-size,
              rgba(
                $topbar-dropdown-toggle-color,
                $topbar-dropdown-toggle-alpha
              ),
              $default-float
            );
          }

          margin-#{$opposite-direction}: $topbar-link-padding;
          position: absolute;
          top: 50%;
          margin-top: -($topbar-dropdown-toggle-size * 0.5) - 2;
          #{$opposite-direction}: 0;
        }
      }

      &.moved {
        position: static;

        > .dropdown {
          @include topbar-show-dropdown;

          width: 100%;
        }

        > a:after {
          display: none;
        }
      }
    }
    // Styling elements inside of dropdowns
    .dropdown {
      @include topbar-hide-dropdown;

      position: absolute;
      top: 0;
      z-index: 99;
      padding: 0;
      #{$default-float}: 100%;

      li {
        width: 100%;
        height: auto;

        a {
          padding: 8px $topbar-link-padding;
          font-weight: $topbar-dropdown-link-weight;

          &.parent-link {
            font-weight: $topbar-link-weight;
          }
        }

        &.title h5,
        &.parent-link {
          margin-top: 0;
          // Back Button
          margin-bottom: 0;
          font-size: $topbar-back-link-size;

          a {
            // line-height: ($topbar-height / 2);
            display: block;
            color: $topbar-link-color;

            &:hover {
              background: none;
            }
          }
        }

        &.has-form {
          padding: 8px $topbar-link-padding;
        }

        .button,
        button {
          top: auto;
        }
      }

      label {
        padding: 8px $topbar-link-padding 2px;
        margin-bottom: 0;
        font-size: $topbar-dropdown-label-font-size;
        font-weight: $topbar-dropdown-label-font-weight;
        color: $topbar-dropdown-label-color;
        text-transform: $topbar-dropdown-label-text-transform;
      }
    }
  }

  .js-generated {
    display: block;
  }
  // Top Bar styles intended for screen sizes above the breakpoint.
  @media #{$topbar-media-query} {
    .top-bar {
      @include clearfix;

      overflow: visible;
      background: $topbar-bg;

      .toggle-topbar {
        display: none;
      }

      .title-area {
        float: $default-float;
      }

      .name h1 a,
      .name h2 a,
      .name h3 a,
      .name h4 a,
      .name h5 a,
      .name h6 a {
        width: auto;
      }

      input,
      select,
      .button,
      button {
        height: $topbar-input-height;
        font-size: rem-calc(14);
        color: $md-gray-40;
        // position: relative;
        // top: (($topbar-height - $topbar-input-height) / 2);
      }

      &.expanded {
        background: $topbar-bg;
      }
    }

    .contain-to-grid .top-bar {
      max-width: $row-width;
      margin: 0 auto;
      margin-bottom: $topbar-margin-bottom;
    }

    .top-bar-section {
      @include single-transition(none, 0, 0);

      #{$default-float}: 0 !important;

      ul {
        display: inline;
        width: auto;
        height: auto !important;

        li {
          float: $default-float;

          .js-generated {
            display: none;
          }
        }
      }

      li {
        &.hover {
          > a:not(.button) {
            color: $topbar-link-color-hover;
            background-color: $topbar-link-bg-color-hover;

            @if $topbar-link-bg-hover {
              background: $topbar-link-bg-hover;
            }
          }
        }

        &:not(.has-form) {
          a:not(.button) {
            padding: 0 $topbar-link-padding;
            line-height: $topbar-height;
            background: $topbar-link-bg;

            &:hover {
              background-color: $topbar-link-bg-color-hover;

              @if $topbar-link-bg-hover {
                background: $topbar-link-bg-hover;
              }
            }
          }
        }

        &.active:not(.has-form) {
          a:not(.button) {
            padding: 0 $topbar-link-padding;
            line-height: $topbar-height;
            color: $topbar-link-color-active;
            background: $topbar-link-bg-active;

            &:hover {
              color: $topbar-link-color-active-hover;
              background: $topbar-link-bg-active-hover;
            }
          }
        }
      }

      .has-dropdown {
        @if $topbar-arrows {
          > a {
            padding-#{$opposite-direction}: (
              $topbar-link-padding + $topbar-link-dropdown-padding
            ) !important;

            &:after {
              @include css-triangle(
                $topbar-dropdown-toggle-size,
                rgba(
                  $topbar-dropdown-toggle-color,
                  $topbar-dropdown-toggle-alpha
                ),
                top
              );

              top: $topbar-height * 0.5;
              margin-top: -($topbar-dropdown-toggle-size * 0.5);
            }
          }
        }

        &.moved {
          position: relative;

          > .dropdown {
            @include topbar-hide-dropdown;
          }
        }

        &.hover,
        &.not-click:hover {
          > .dropdown {
            @include topbar-show-dropdown;
          }
        }

        > a:focus + .dropdown {
          @include topbar-show-dropdown;
        }

        .dropdown li.has-dropdown {
          > a {
            @if $topbar-dropdown-arrows {
              &:after {
                top: rem-calc(3);
                border: none;
                content: '\00bb';
                #{$opposite-direction}: 5px;
              }
            }
          }
        }
      }

      .dropdown {
        #{$default-float}: 0;
        top: auto;
        min-width: 100%;
        background: transparent;

        li {
          a {
            padding: 12px $topbar-link-padding;
            line-height: $topbar-height;
            color: $topbar-dropdown-link-color;
            white-space: nowrap;
            background: $topbar-dropdown-link-bg;
          }

          &:not(.has-form):not(.active) {
            > a:not(.button) {
              color: $topbar-dropdown-link-color;
              background: $topbar-dropdown-link-bg;
            }

            &:hover > a:not(.button) {
              color: $topbar-dropdown-link-color-hover;
              background-color: $topbar-link-bg-color-hover;

              @if $topbar-dropdown-link-bg-hover {
                background: $topbar-dropdown-link-bg-hover;
              }
            }
          }

          label {
            white-space: nowrap;
            background: $topbar-dropdown-label-bg;
          }
          // Second Level Dropdowns
          .dropdown {
            #{$default-float}: 100%;
            top: 0;
          }
        }
      }

      > ul > .divider,
      > ul > [role='separator'] {
        border-#{$opposite-direction}: $topbar-divider-border-bottom;
        width: 0;
        height: $topbar-height;
        clear: none;
        border-top: none;
        border-bottom: none;
      }

      .has-form {
        height: $topbar-height;
        padding: 0 $topbar-link-padding;
        background: $topbar-link-bg;
      }
      // Position overrides for ul.right and ul.left
      .#{$opposite-direction} {
        li .dropdown {
          #{$default-float}: auto;
          #{$opposite-direction}: 0;

          li .dropdown {
            #{$opposite-direction}: 100%;
          }
        }
      }

      .#{$default-float} {
        li .dropdown {
          #{$opposite-direction}: auto;
          #{$default-float}: 0;

          li .dropdown {
            #{$default-float}: 100%;
          }
        }
      }
    }
    // Degrade gracefully when Javascript is disabled. Displays dropdown and changes
    // background & text color on hover.
    .no-js .top-bar-section {
      ul li {
        // Apply the hover link color when it has that class
        &:hover > a {
          color: $topbar-link-color-hover;
          background-color: $topbar-link-bg-color-hover;

          @if $topbar-link-bg-hover {
            background: $topbar-link-bg-hover;
          }
        }
        // Apply the active link color when it has that class
        &:active > a {
          color: $topbar-link-color-active;
          background: $topbar-link-bg-active;
        }
      }

      .has-dropdown {
        &:hover {
          > .dropdown {
            @include topbar-show-dropdown;
          }
        }

        > a:focus + .dropdown {
          @include topbar-show-dropdown;
        }
      }
    }
  }

  .header-label {
    display: none;

    @media (min-width: 1070px) {
      align-self: center;
      display: inline-block;
    }
  }

  .top-bar {
    border: none;
    box-shadow: 0px 0px 0px 1px $md-gray-20;

    &.top-bar-fixed-top {
      position: fixed;
      z-index: 2;
      width: 100%;
      min-height: vr-adjust(56);
    }
  }

  .top-bar .dropdown-menu,
  .top-bar-nav > li > .dropdown-menu {
    margin-top: 0;

    > li:first-child > a,
    > li:last-child > a,
    > li:first-child > span,
    > li:last-child > span {
      border-radius: 0;
    }
  }

  .top-bar-brand {
    margin-right: 20px;
    font-family: $brand-font-extra-light, $icon-font-name;
    font-size: 24px;

    > img {
      display: inline-block;
    }

    &:before {
      @include icon-cisco-logo;

      display: inline-block;
      margin-right: 15px;
    }
  }

  .top-bar-nav > li {
    margin-right: 3px;

    > a {
      padding: 15px 30px;
    }

    &.active {
      > a {
        margin-bottom: -1px;
        border-bottom: 1px solid $md-theme-60;
      }
    }
  }

  .top-bar-default {
    .top-bar-brand {
      color: $md-gray-30;
    }
  }

  .top-bar-inverse {
    box-shadow: 0 1px 3px 0px rgba(0, 0, 0, 0.6);

    .top-bar-brand {
      color: $md-gray-20;

      &:before {
        @include icon-cisco-logo;
      }
    }

    .top-bar-nav > li > a {
      background: $md-gray-90;
    }
  }
  // Admin top-bar
  .top-bar-admin {
    .header-title {
      position: relative;
      top: 1px;
    }

    .inverse & .top-bar {
      color: $md-gray-20;
      background-color: $md-gray-90;
      border-bottom-color: $md-gray-90;

      .header-title,
      .top-bar-orgname {
        color: $top-bar-admin-border;
      }
    }

    .container-fluid {
      position: relative;
      padding-right: 0;
    }

    .top-bar-brand {
      padding: 10px 15px;
      margin-left: -15px;
      font-size: 17px;
      line-height: 35px;
      color: $top-bar-admin-brand-color;
      vertical-align: top;

      &:before {
        font-size: 35px;
      }

      &:hover,
      &:focus {
        color: $top-bar-admin-brand-hover-color;
        background-color: $top-bar-admin-brand-hover-bg;
      }
    }

    .top-bar-orgname {
      display: none;
      max-width: 98%;
      padding-left: 20px;
      margin-left: 7px;
      font-family: $brand-font-extra-light;
      font-size: 17px;
      -webkit-font-smoothing: antialiased;
      color: $md-gray-40;
      border-left: 1px solid $top-bar-admin-border;

      .inverse & {
        border-color: $top-bar-inverse-border;
      }

      @media (min-width: 800px) {
        display: inline-block;
      }

      .top-bar-title {
        @include text-overflow;
      }
    }

    .top-bar-text {
      color: $top-bar-admin-color;
    }

    .top-bar-nav {
      > li > a {
        color: $top-bar-admin-link-color;

        &:hover,
        &:focus {
          color: $top-bar-admin-link-hover-color;
          background-color: $top-bar-admin-link-hover-bg;
        }
      }

      > .active > a {
        &,
        &:hover,
        &:focus {
          color: $top-bar-admin-link-active-color;
          background-color: $top-bar-admin-link-active-bg;
        }
      }

      > .disabled > a {
        &,
        &:hover,
        &:focus {
          color: $top-bar-admin-link-disabled-color;
          background-color: $top-bar-admin-link-disabled-bg;
        }
      }
    }

    .top-bar-toggle {
      border-color: $top-bar-admin-toggle-border-color;

      &:hover,
      &:focus {
        background-color: $top-bar-admin-toggle-hover-bg;
      }

      .icon-bar {
        background-color: $top-bar-admin-toggle-icon-bar-bg;
      }
    }

    .top-bar-collapse,
    .top-bar-form {
      border-color: $top-bar-admin-border;
    }
    // Dropdown menu items
    .top-bar-nav {
      // Remove background color from open dropdown
      > .open > a {
        &,
        &:hover,
        &:focus {
          color: $top-bar-admin-link-active-color;
          background-color: $top-bar-admin-link-active-bg;
        }
      }

      @media (max-width: $grid-float-breakpoint-max) {
        // Dropdowns get custom display when collapsed
        .open .dropdown-menu {
          > li > a,
          > li > span {
            color: $top-bar-admin-link-color;

            &:hover,
            &:focus {
              color: $top-bar-admin-link-hover-color;
              background-color: $top-bar-admin-link-hover-bg;
            }
          }

          > .active > a,
          > .active > span {
            &,
            &:hover,
            &:focus {
              color: $top-bar-admin-link-active-color;
              background-color: $top-bar-admin-link-active-bg;
            }
          }

          > .disabled > a,
          > .disabled > span {
            &,
            &:hover,
            &:focus {
              color: $top-bar-admin-link-disabled-color;
              background-color: $top-bar-admin-link-disabled-bg;
            }
          }
        }
      }
    }
    // Links in top-bars
    //
    // Add a class to ensure links outside the top-bar nav are colored correctly.
    .top-bar-link {
      color: $top-bar-admin-link-color;

      &:hover {
        color: $top-bar-admin-link-hover-color;
      }
    }
  }
}

$top-bar-user-height: rem-calc(68);
$top-bar-mobile-height: rem-calc(48);

@include exports('top-bar-user') {
  .sign-out {
    margin-right: 0;
  }

  .top-bar--user {
    background-color: $md-white-100;
    box-shadow: 0px -2px 2px 2px #858688;

    @media #{$medium-up} {
      @include vr-spacing(pt, 1);
    }

    .top-bar {
      height: $top-bar-mobile-height;
      overflow: visible;
      box-shadow: none;

      @media #{$medium-up} {
        height: $top-bar-user-height;
      }

      .app-logo {
        @include vr-spacing(mt, -1);

        .icon {
          display: flex;
          font-size: rem-calc(26);
          color: $md-gray-30;
          align-items: center;

          @include vr-spacing(pr, 1);
        }

        img {
          width: 48px;
          max-width: none;
          margin: 0 auto;
        }
      }

      .app-name {
        @extend %h4;

        display: flex;
        font-family: $brand-font-extra-light;
        color: $md-gray-90;
        align-items: center;

        @media #{$small-only} {
          display: none;
        }
      }

      .title-area {
        display: flex;
        align-items: center;
      }
    }
  }
}