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

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

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

      .topbar__link-label {
        @include h5;
      }

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

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

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

      &.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__link-icon {
          @include icon-style-inverted;
        }
      }
    }

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

      .topbar__workspace-menu {
        margin-right: auto;
        position: relative;

        .topbar__workspace-menu__toggle {
          margin: 0;
          border-radius: 0;

          &--open {
            background-color: $color-blue-darkest;
            position: relative;

            &::before {
              content: '';
              display: block;
              position: absolute;
              bottom: 0;
              left: $gap * 2;
              right: $gap * 2;
              height: $gap / 2;
              background-color: $color-primary;
            }
          }

          .icon {
            @include icon-size(10);
            margin-left: $gap * 2;
          }
        }

        .topbar__workspace-menu__panel {
          position: absolute;
        }
      }

      &.topbar__context--workspace {
        background-color: $color-primary;
        -ms-flex-pack: start;

        .topbar__link {
          color: $color-white;

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

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


  &.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;
      }
    }
  }
}
