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