.topbar {
  background-color: $color-blue-darkest;
  border-bottom: 1px solid $color-black;

  .topbar__navigation {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: space-between;

    .topbar__link {
      color: $color-white;
      display: inline-flex;
      align-items: center;
      height: $topbar-height;
      padding: 0 ($gap * 2);
      text-decoration: none;

      .topbar__link-label {
        @include h5;

        text-decoration: underline;
      }

      .topbar__link-icon {
        margin-left: $gap;

        @include icon-color($color-white);
      }

      &.topbar__link--home {
        padding-left: $gap / 2;

        .topbar__link-label {
          padding-left: $gap;
          text-decoration: none;
        }
      }

      &.topbar__link--shield {
        width: $icon-bar-width;
        justify-content: center;
        padding: 0;

        .topbar__link-icon {
          margin: 0;
        }
      }

      &:hover {
        background-color: $color-primary-darker;
        color: $color-white;
      }
    }

    .topbar__context {
      display: flex;
      flex-grow: 1;
      flex-direction: row;
      align-items: stretch;
      justify-content: flex-end;

      .topbar__portfolio-menu {
        margin-right: auto;
        position: relative;
      }
    }
  }

  &.topbar--public {
    background-color: $color-primary;

    .topbar__navigation {
      justify-content: flex-end;
      -ms-flex-pack: justify;
    }

    .topbar__link {
      color: $color-white;

      .topbar__link-icon {
        @include icon-style-inverted;
      }

      &.topbar__link--home {
        padding-left: $gap;
      }

      &:first-child {
        margin-right: auto;
      }

      &:hover {
        background-color: $color-primary-darker;
      }
    }
  }
}