.header-primary {
  .logo {
    z-index: 9998;
    display: block;
    position: fixed;
    top: 0.5rem;
    left: 0;
    width: 6.5rem;
    height: 2.5rem;
    text-decoration: none;
    transition: left .5s;

    path {
      transition: fill .4s ease;
      fill: $intense-orange;
    }
  }

  .logo-container {
    position: fixed;
    z-index: 9998;
    top: 0;
    left: 0;
    width: 15.625rem;
    height: 4.75rem;
    transition: width .5s;
  }

  &.collapsed .logo-container {
    width: 0;
  }

  @include media-breakpoint-down(xs) {
    &.collapsed .logo {
      left: -6.5rem;
    }
  }

  .nav-menu-toggle {
    position: fixed;
    z-index: 9999;
    top: 1.1rem;
    transition: left 0.5s, color 0.5s;
    cursor: pointer;
    left: 1.5rem;

    &.expanded {
      left: 7.6rem;
    }

    i {
      font-size: 1.25rem;
      color: $gray-700;
    }
  }
}

.toolbar-white {
  .toolbar-menu-item i,
  .nav-menu-toggle i,
  .current-account .current-account-item {
    color: $white !important;
  }

  .collapsed {
    .logo path {
      fill: $white;
    }
  }

  .toolbar-search input {
    border-bottom-color: $white;
    background-color: transparent;
    color: $white;

    &::placeholder {
      color: $white;
    }
  }
}




@include media-breakpoint-up(xs) {
  .header-primary .nav-menu-toggle.expanded {
    left: 17.75rem;

    i {
      color: $gray-50;
    }
  }
}

@include media-breakpoint-up(sm) {
  .header-primary .nav-menu-toggle.collapsed {
    left: 7.6rem;
  }
}

@include media-breakpoint-up(lg) {
  .header-primary .nav-menu-toggle.expanded i {
    color: $gray-700;
  }
}

.toolbar-menu {
  display: flex;
  flex-direction: row-reverse;
  position: fixed;
  top: 1rem;
  right: 2rem;
  height: 2rem;
  z-index: 9998;
  list-style: none;
  padding: 0;
}

.toolbar-menu-text, .toolbar-menu-item {
  list-style: none;
  display: block;
  float: right;

  &:hover, &:active, &:focus {
    text-decoration: none;
  }
}

.toolbar-menu-item {
  width: 2rem;
  height: 2rem;
  margin-left: 0;
  text-align: center;

  .ico {
    display: block;
  }

  .ico-search {
    font-size: 1.18rem;
  }

  .ico-notifications {
    font-size: 1.12rem;
  }

  .ico-menu {
    font-size: 1rem;
    margin-top: 0.0625rem;
  }
}

// modifying notification margins
.hidden-xxs {
  .toolbar-menu-item {

    &.dropdown-toggle {
      margin-right: 1rem;
    }
  }
}

@include media-breakpoint-down(xs) {
  .toolbar-menu-item {
    margin-left: 0;
  }

  .header-primary.expanded i,
  .toolbar-menu.expanded i {
    color: $white;
  }

  // modifying notification margins
  .hidden-xxs {
    .toolbar-menu-item {

      &.dropdown-toggle {
        margin-right: .5rem;
      }
    }
  }
}

@include media-breakpoint-down(xxs) {
  .toolbar-menu {
    width: 44px;
  }
}

.toolbar-menu-text {
  font-size: 0.875rem;
  margin-top: 0.1875rem;
  margin-right: 0.5rem;
}

.toolbar-search {
  width: 16rem;

  input, .algolia-autocomplete {
    width: 0;
    border: none;
    border-bottom: solid 0.0625rem $gray-700;
    transition: width 0.25s ease-in-out, opacity 0.25s ease-in-out;
    opacity: 0;
  }

  .toolbar-menu-item {
    transition: right 0.25s ease-in-out;
  }

  .algolia-autocomplete {
    border-bottom: none;
  }

  &.expanded {
    input, .algolia-autocomplete {
      width: 13.75rem;
      opacity: 1;
    }
  }
}

@include media-breakpoint-down(xs) {
  .toolbar-search .toolbar-menu-item {
    right: 4.7rem;
  }
}

.pace {
  pointer-events: none;
  user-select: none;

  .pace-progress {
    background: $intense-orange;
    position: fixed;
    z-index: 10000;
    top: 0;
    right: 100%;
    width: 100%;
    height: 0.125rem;
  }
}

.pace-inactive {
  display: none;
}
