:global {
  // this is to include tc styles in the output library
  @import '~tc-ui/src/styles/tc-includes';
  
  /* Breakpoints - update as necessary */
  $mobile: 768px;
  $super-wide: 1376px;
  
  .Navbar {
    height: 60px;
    background-color: $tc-gray-neutral-light;
    border-bottom: 1px solid $tc-gray-30;
    padding: 10px 20px;
    width: 100%;
  
    @media screen and (max-width: $mobile) {
      height: 40px;
      padding-top: 0;
      padding-bottom: 0;
    }
  
    .topcoder-logo {
      width: 56px;
      height: 24px;
      margin-right: 40px;
      flex: 0 0 auto;
      display: flex;
      align-items: center;
  
      @media screen and (min-width: $super-wide) {
        width: 155px;
  
        &.non-mobile {
          display: flex;
        }
        &.mobile {
          display: none;
        }
      }
  
      @media screen and (max-width: $super-wide) {
        width: 40px;
        margin-right: 15px;
  
        &.non-mobile {
          display: none;
        }
        &.mobile {
          display: flex;
        }
      }
    }
  
    .search-bar-wrap {
      flex: 1 1 auto;
      margin-right: 35px;
  
      @media screen and (min-width: $super-wide) {
        margin-right: 32px;
      }
  
      @media screen and (max-width: $mobile) {
        flex: 0 0 60px;
        order: 2;
        width: 60px;
        height: 40px;
        display: flex;
        margin-right: 0px;
        justify-content: center;
        align-items: center;
      }
  
      &:hover {
        background-color: $tc-gray-40;
  
        .mobile-wrap {
          svg > g > g {
            stroke: white;
          }
        }
      }
  
      .mobile-wrap {
        display: none;
  
        @media screen and (max-width: $mobile) {
          display: block;
          margin: auto;
        }
      }
  
      .SearchBar {
        margin-right: 45px;
        max-width: 789px;
  
        @media screen and (max-width: $mobile) {
          display: none;
        }
      }
    }
  
    .MenuBar {
      margin-right: 30px;
  
      @media screen and (max-width: $mobile) {
        order: 1;
        margin-right: 7px;
      }
  
      &.horizontal li {
        position: relative;
  
        a {
          @media screen and (max-width: $mobile) {
            padding-bottom: 0;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
          }
        }
      }
    }
  
    .menu-wrap {
      flex: 0 0 auto;
      position: relative;
      display: flex;
      align-items: center;
  
      @media screen and (max-width :$mobile) {
        width: 40px;
        height: 40px;
        order: 3;
        cursor: pointer;
  
        &:hover {
          background-color: $tc-gray-40;
  
          .mobile-wrap {
            svg > g > g {
              stroke: white;
            }
          }
        }
      }
  
      .mobile-wrap {
        display: none;
  
        @media screen and (max-width: $mobile) {
          display: block;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
      }
  
      .quick-links-wrap {
        margin-right: 30px;
        display: inline-block;
        vertical-align: middle;
  
        @media screen and (max-width: $mobile) {
          display: none;
        }
  
        .Dropdown {
          right: -46px;
          top: 10px;
        }
      }
  
      .UserDropdownMenu {
        flex-shrink: 0;
        background-color: transparent;
  
        @media screen and (max-width: $mobile) {
          display: none;
        }
      }
    }
  }
}