// this is to include tc styles in the output library
@import "topcoder/tc-styles";

$navbar-bg: #FAFAFB;
$border-color: #CFCFD2;
$placeholder-bg: #B47DD6;

/* Breakpoints - update as necessary */
$mobile: 768px;
$super-wide: 1376px;

.Navbar {
  height: 60px;
  background-color: $navbar-bg;
  border-bottom: 1px solid $border-color;
  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: $accent-gray;

      .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: $accent-gray;

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