@import "styles/base.scss";

.filters {
  width: 100%;
}

.global-navbar-top {
  height: 75px;
  position: absolute;
  top: 0;
  left: 0;
  right: 250px;
  z-index: 3001;

  @include media("<=1600px") {
    right: 100px;
  }

  @include media("<tablet") {
    right: 0;
  }

  .header-container {
    display: flex;
    height: 100%;
    width: 100%;

    @include media("<tablet") {
      right: 155px;
      width: calc(100% - 155px);
    }
    @include media("<500px") {
      right: 75px;
      width: calc(100% - 75px);
    }

    .item {
      display: flex;
      text-align: center;
      // vertical-align: middle;
      align-items: center;

      &.title {
        background-color: $blue;
        padding: 0 15px;
        width: 80%;
        img {
          max-width: 100%;
        }

        &.phone {
          @include media(">=tablet") {
            display: none;
          }
        }

        &.tablet {
          background-color: white;
          display: none;
          text-align: right;
          padding-left: 105px;
          z-index: 9001;

          @include media(">=tablet") {
            display: flex;
            width: 100%;
            align-items: center;
          }

          @include media(">=1600px") {
            padding-left: 160px;
          }
        }

        h1 {
          color: $blue;
          font-family: $font-family-sans-serif;
          margin: 0;
          font-size: 36px;
          font-weight: 700;
          text-transform: uppercase;
          line-height: 1;
          float: left;

          @include media("<=1600px") {
            font-size: 24px;
            line-height: 0.8;
          }
        }
      }

      &.chat,
      &.contacts,
      &.user,
      &.menu {
        cursor: pointer;
      }

      &.help,
      &.filters {
        display: none;
        background-color: white;
        text-transform: uppercase;
        font-weight: 700;
        @include media("<=1600px") {
          display: table-cell;
          text-align: center;
          vertical-align: middle;
        }
        span {
          display: block;
        }

        .icon {
          color: $blue;
          font-size: 35px;
          padding: 0 15px;
          .svg {
            width: 45px;
            height: 35px;
            margin: -5px auto 5px;
          }
        }
      }
      &.filter {
        background-color: white;
        text-transform: uppercase;
        font-weight: 700;

        span {
          display: block;
        }

        .icon {
          color: $blue;
          font-size: 35px;

          .svg {
            width: 45px;
            height: 35px;
            margin: -5px auto 5px;
          }
        }
      }

      &.help {
        border-left: 1px solid #becad5;

        @include media(">=tablet") {
          border-left: 1px solid #becad5;
          box-shadow: none;
        }
      }
      &.filters {
        box-shadow: -5px 0px 0px 0px rgba(0, 0, 0, 0.1);

        @include media(">=tablet") {
          border-left: 1px solid #becad5;
          box-shadow: none;
        }
      }

      &.contacts {
        border-left: 1px solid #becad5;
        display: none;

        @include media(">=tablet") {
          display: table-cell;
        }

        @include media(">=1600px") {
          display: none;
        }
      }

      &.chat {
        border-left: 1px solid #becad5;
        display: none;

        @include media(">=tablet") {
          display: table-cell;
        }
      }

      &.user {
        border-left: 1px solid #becad5;
        background-color: white;
        width: 80px;
        position: relative;

        @include media(">=tablet") {
          border-left: none;
          background-color: #002d5b;
          box-shadow: inset 10px 0 0 -5px rgba(0, 0, 0, 0.33);
          width: 100px;
        }

        @include media(">=1600px") {
          width: 250px;
        }

        img {
          border-radius: 50px;
          width: 50px;
          height: 50px;

          @include media(">=1600px") {
            margin-right: 10px;
          }
        }

        .open-close-icon.mobile {
          background-color: $blue;
          border-radius: 32px;
          box-shadow: 0 5px 0 0 rgba(0, 0, 0, 0.25);
          position: absolute;
          top: 5px;
          right: 5px;
          width: 32px;
          height: 32px;
          -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
          display: none;

          &:before,
          &:after {
            background-color: white;
          }
        }

        .user-info {
          display: none;
          vertical-align: middle;
          margin-right: 10px;

          @include media(">=1600px") {
            display: inline-block;
          }

          p {
            color: white;
            margin: 0;
            font-weight: 400;
            line-height: 1.1;
            text-transform: none;
            text-align: left;
          }

          .position {
            color: $blue;
            font-size: 12px;
          }
        }

        .dropdown-icon {
          display: none;
          border-right: 2px solid $blue;
          border-bottom: 2px solid $blue;
          width: 15px;
          height: 15px;
          margin-left: 10px;
          -webkit-transform: rotate(45deg);
          transform: rotate(45deg);

          @include media(">=tablet") {
            display: inline-block;
          }
        }

        &.active {
          background-color: #becad5;

          @include media(">=tablet") {
            background-color: #002d5b;
          }

          img {
            border: 2px solid $blue;

            @include media(">=tablet") {
              border: none;
            }
          }

          .open-close-icon {
            display: block;

            @include media(">=tablet") {
              display: none;
            }
          }
        }
      }
      &.menu {
        background-color: #002d5b;
        width: 75px;

        .bar {
          background-color: $blue;
          display: block;
          width: 30px;
          height: 2px;
          margin: 7px auto;
          position: relative;
          transition: all 0.3s;
        }

        .open,
        .close {
          text-transform: uppercase;
          font-weight: 700;
        }

        .close {
          display: none;
        }

        @include media(">=tablet") {
          display: none;
        }

        &.active {
          .bar-top {
            top: 9px;
            -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
          }
          .bar-middle {
            opacity: 0;
          }
          .bar-bottom {
            top: -9px;
            -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
          }

          .open {
            display: none;
          }

          .close {
            display: inline;
            float: none;
            font-size: inherit;
            text-shadow: none;
            color: #7e95ac;
            opacity: 1;
          }
        }
      }
    }
  }

  /* tab content */
  .top-navbar-tab {
    position: absolute;
    width: 100%;
    left: 0;
    top: 75px;
    @include media(">=tablet") {
      display: none !important;
    }

    .item {
      background-color: #002d5b;
      border-top: 1px solid rgba(255, 255, 255, 0.05);
      position: relative;
      transition: background-color 0.4s;

      .select-wrapper {
        padding: 5px;
      }

      &:first-child,
      &.user:first-child {
        border-top: none;
      }

      &.user {
        border-top: 1px solid rgba(255, 255, 255, 0.5);
        color: $dark-blue;
        background-color: #becad5;

        .icon {
          color: $light-blue;
        }

        .item-header {
          .icon-pointer {
            color: white;
          }
        }
      }

      .item-header {
        display: block;
        padding: 15px;
        cursor: pointer;
      }

      a.item-header {
        color: inherit;
        font-size: 16px;
        font-weight: 700;

        .icon-pointer {
          color: $blue;
          position: absolute;
          font-size: 24px;
          right: 15px;
          top: 17px;
          opacity: 0.5;
        }

        &:hover,
        &:focus {
          .icon-pointer {
            opacity: 1;
          }
        }
      }

      .icon {
        color: $blue;
        font-size: 28px;
        margin-right: 15px;
        vertical-align: middle;
        text-align: center;
        display: inline-block;
        width: 40px;
      }

      h3 {
        display: inline-block;
        font-size: 16px;
        font-weight: 700;
        line-height: 25px;
        margin: 0;
        vertical-align: middle;
      }

      .svg {
        //opacity: 0.5;
        display: inline-block;
        width: 40px;
        height: auto;
        margin-right: 15px;
        vertical-align: middle;

        svg {
          width: 40px !important;
        }
      }

      .open-close-icon {
        position: absolute;
        right: 15px;
        top: 17px;
        opacity: 0.5;
      }

      &:hover,
      &:focus {
        .open-close-icon {
          opacity: 1;
        }
      }

      &.active {
        background-color: #061c41;

        h3 {
          color: white;
        }

        .open-close-icon {
          -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
          opacity: 1;
        }
      }

      .inner-items {
        .inner-item {
          border-top: 1px solid rgba(255, 255, 255, 0.05);
          display: block;
          padding: 15px;
          text-align: center;

          .blue-button {
            padding: 7px 25px;
          }

          &.contact {
            padding: 10px 0 10px 15px;
            display: table;
            width: 100%;

            .title {
              display: table-cell;
              vertical-align: middle;
              text-align: left;

              h4 {
                color: white;
                margin: 0;
              }

              span {
                color: $blue;
                font-size: 12px;
                text-transform: uppercase;
                font-weight: 700;
              }
            }

            a {
              border-left: 1px solid rgba(255, 255, 255, 0.1);
              display: table-cell;
              width: 60px;

              span {
                color: $light-blue;
                display: block;
                margin: 0 auto;
                text-transform: uppercase;
                font-weight: 700;

                &.icon {
                  color: $blue;
                }
              }
            }
          }
        }
        a.inner-item {
          color: white;
          font-weight: 700;

          .icon {
            color: $blue;
            margin-left: 15px;
          }
        }
      }
    }
  }
}

/* user menu and submenu */
#user-menu {
  &:before {
    content: "";
    display: none;
    background-color: #061c41;
    width: 16px;
    height: 16px;
    position: absolute;
    left: 50%;
    margin-left: -8px;
    bottom: -8px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
  }

  .open-close-icon.tablet {
    position: static;
    margin: 0 0 0 5px;
    vertical-align: middle;
    display: none;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
  }

  #user-submenu {
    display: none;
    background-color: #061c41;
    position: absolute;
    right: 0;
    top: 100%;
    width: 180px;
    text-align: left;

    .select-wrapper {
      margin: 5px;
    }

    @include media(">=1600px") {
      width: 250px;
    }

    a {
      font-weight: 700;
      display: block;
      padding: 15px 10px;
      border-top: 1px solid $dark-gray;

      &:first-child {
        border-bottom: 1px solid $light-blue;
      }

      .icon {
        color: $light-blue;
        font-size: 24px;
        vertical-align: middle;
        margin-right: 5px;
      }
    }
  }

  &.show-submenu {
    @include media(">=tablet") {
      #user-submenu,
      &:before {
        display: block;
      }

      .dropdown-icon {
        display: none;
      }

      .open-close-icon.tablet {
        display: inline-block;
      }
    }
  }
}
.contacts-sidebar {
  &.hidden {
    animation: go-right 0.7s normal;
    right: -260px;
  }
  @-webkit-keyframes go-right {
    from {
      right: 0;
      opacity: 1;
    }
    to {
      right: -260px;
      opacity: 0;
    }
  }
}
#open-filters-button {
  position: relative;
  display: none;
  flex-direction: column;
  height: 100%;
  width: 100px;
  align-items: center;
  justify-content: center;
  @include media("<=1200px") {
    display: flex;
    z-index: 9001;
  }
  .open-close-icon {
    background-color: $blue;
    border-radius: 35px;
    box-shadow: 0 5px 0 0 rgba(0, 0, 0, 0.25);
    position: absolute;
    top: 10px;
    width: 35px;
    height: 35px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    display: none;

    &:before,
    &:after {
      background-color: white;
    }
    &.filter {
      display: none;
      background-color: white;
      text-transform: uppercase;
      font-weight: 700;
      @include media("<=1600px") {
        display: table-cell;
        text-align: center;
        vertical-align: middle;
      }
      span {
        display: block;
      }

      .icon {
        color: $blue;
        font-size: 35px;
        padding: 0 15px;
        .svg {
          width: 45px;
          height: 35px;
          margin: -5px auto 5px;
        }
      }
    }
  }
  &.show-filter {
    .open-close-icon {
      display: block;
    }
  }
}
/* open contacts sidebar */
#open-contacts-sidebar-button {
  position: relative;
  display: none;
  flex-direction: column;
  height: 100%;
  align-items: center;
  justify-content: center;
  z-index: 9001;
  @include media("<=1600px") {
    display: flex;
  }
  .open-close-icon {
    background-color: $blue;
    border-radius: 35px;
    box-shadow: 0 5px 0 0 rgba(0, 0, 0, 0.25);
    position: absolute;
    top: 10px;
    width: 35px;
    height: 35px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    display: none;

    &:before,
    &:after {
      background-color: white;
    }
  }

  &.show-sidebar {
    .open-close-icon {
      display: block;
    }
  }
}

.enterprise-page {
  #open-contacts-sidebar-button {
    display: none;
  }
}
.filter-wrapper {
  display: flex;
  align-items: center;
  text-align: center;
  vertical-align: middle;
  background: #fff;
  width: calc(100% + 15px);

  .filters {
    padding: 15px;
  }

  .filter-label {
    margin: 10px;
    color: $dark-blue;
    display: inline;
    font-size: 14px;
    font-weight: bolder;
    border-radius: 4px;
    text-transform: uppercase;
    @include media("<=767px") {
      font-size: 12px;
    }
  }

  @include media("<=1200px") {
    top: 75px;
    // left: 90px; doesn't account for navigation panel expansion
    left: 250px;
    position: absolute;
    width: calc(100% + 15px);
    display: none;

    &.show {
      display: inherit;
    }
    &:not(.show) {
      height: 0px;
      display: none;
    }
  }

  @include media("<=767px") {
    left: 0px;
    flex-direction: column;
    width: calc(100% + 0px);
  }
}

// .company-filter-dropdown{
//   text-align: right !important;
//   font-family: "Source Sans Pro";
//   width: 250px;
//   padding-left: 15px;
//   padding-right: 15px;
//   //margin-bottom: 10px;
//   .filter-label{
//       margin: 10px;
//       color: $dark-blue;
//       display: inline;
//       font-size: 14px;
//       font-weight: bolder;
//       border-radius: 4px;
//       text-transform: uppercase;
//       @include media('<=767px') {
//           font-size: 12px;
//       }
//   }
//   .filter-dropdown{
//       display: inline;
//       position: relative;
//       text-transform: none !important;
//       margin: 0;
//       margin-left: 3px;

//       a {
//           color:#00aeef;
//           border-color:#00aeef;
//           border-width: 2px;
//           // max-width: 144px;
//           width: 200px;
//           font-size: 14px;
//           white-space: nowrap;
//           overflow: hidden;
//           text-overflow: ellipsis;
//           width: 100%;
//           @include media('<=767px') {
//           font-size: 12px;
//           }
//           &:hover, &:focus, &:active, &:visited{
//           background-color: $blue;
//           color: $white;
//           }
//       }
//       .dropdown-icon{
//           display: inline-block !important;
//           border-right: 2px solid #00aeef;
//           border-bottom: 2px solid #00aeef;
//           width: 7px;
//           height: 7px;
//           margin-left: 7px;
//           -webkit-transform: rotate(45deg);
//           transform: rotate(45deg);
//           margin-bottom: 2px;
//       }
//       &.open{
//           .dropdown-icon{
//           -webkit-transform: rotate(228deg);
//           transform: rotate(228deg);
//           }
//           > .dropdown-toggle.btn-default{
//           background-color: transparent;
//           }
//       }

//     .dropdown-menu{
//       top: 33px;
//       text-align: left;
//       // position: absolute;

//   top: 100%;
//   left: 0;
//   z-index: 1000;
//   float: left;
//   min-width: 160px;
//   padding: 20px;
//   margin: 2px 0 0;
//   font-size: 14px;
//   font-weight: 400;
//   text-align: left;
//   list-style: none;
//   background-color: #fff;
//   background-clip: padding-box;
//   border: 1px solid #ccc;
//   border: 1px solid rgba(0,0,0,.15);
//   border-radius: 4px;
//   -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
//   box-shadow: 0 6px 12px rgba(0,0,0,.175);
//       &:before {
//         position: absolute;
//         display: inline-block;
//         content: '';
//         top: -7px;
//         left: 9px;
//         border-right: 7px solid transparent;
//         border-left: 7px solid transparent;
//         border-bottom: 7px solid #ccc;
//       }
//       &:after{
//         position: absolute;
//         display: inline-block;
//         content: '';
//         top: -6px;
//         left: 10px;
//         border-right: 6px solid transparent;
//         border-bottom: 6px solid #fff;
//         border-left: 6px solid transparent;
//       }
//       li{
//         color: #00aeef;
//         border-color: #00aeef;
//         border-width: 2px;
//         max-width: 144px;
//         white-space: nowrap;
//         overflow: hidden;
//         text-overflow: ellipsis;
//         width: 100%;

//         a{
//             &:hover, &:focus, &:active, &:visited{
//               display: block;
//               padding: 3px 20px;
//               clear: both;
//               font-weight: 400;
//               line-height: 1.42857143;
//               background-color: $blue;
//               color: $white;

//             }
//         }
//       }
//     }
//   }
// }