$top-bar-sub-height: 50px;

.top-bar {
  &-sub {
    @include align-center-vertical;
    width: 100%;
    height: $top-bar-sub-height;
    background-color: #999999;
    font-size: 18px;
    text-align: left;
    color: white;
    padding-left: 40px;

    &-menu {
      display: flex;
      margin-left: auto;
      margin-right: 20px;

      @mixin menu-item {
        margin-right: 14px;
        font-size: 14px;
        font-weight: 600;
        color: white;
        padding: 5px;
        @include align-center-both;
      }

      &__item {
        @include menu-item;

        &:hover {
          cursor: pointer;
          background-color: rgba(0, 0, 0, 0.1);
        }

        &:last-child {
          margin-right: 0;
        }

        &--inactive {
          @include menu-item;
          @include inactive-button;

          &:last-child {
            margin-right: 0;
          }
        }
      }
    }
  }
}