//** Admin | Toolbar

.admin__toolbar {
  background: var(--admin-toolbar);

  &--body {
    height: 100%;
    width: 100%;
    display: flex;
    padding: 0;

    &.is-dark {
      color: var(--admin-toolbar-text-light);

      a {
        color: var(--admin-toolbar-text-light);
      }

      .toolbar-item__brand svg g {
        fill: var(--admin-toolbar-text-light);
      }
    }

    &.is-light {
      color: var(--admin-toolbar-text-dark);

      a {
        color: var(--admin-toolbar-text-dark);
      }

      .toolbar-item__brand svg g {
        fill: var(--admin-toolbar-text-dark);
      }
    }
  }

  .toolbar-impersonation {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
  }

  .toolbar-item {
    position: relative;
    height: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;

    a {
      font-size: 0.9375rem;
      padding: $spacer*0.625;
      display: block;
      color: var(--foreground);

      &:hover,
      &:active,
      &:focus {
        @include darken(--admin-sidebar, 0.02);

        color: var(--admin-sidebar-icon);
        text-decoration: none;
      }
    }

    &:hover {
      .dropdown-menu {
        display: block;
      }
    }

    i,
    .fas {
      margin-right: 0.45rem;
    }

    .dropdown-menu {
      margin: 0;
      padding: 0;
      min-width: 220px;
      top: calc(100% - 1px);

      ul {
        list-style: none;
        padding: 0;
        margin: 0;
      }

      a {
        color: var(--shade);

        &:hover,
        &:active,
        &:focus {
          @include darken(--admin-sidebar, 0.02);

          color: var(--admin-sidebar-icon);
          text-decoration: none;
        }
      }

      i,
      .fas {
        margin-right: 0.25rem;
      }
    }

    &.toolbar-item__filter {
      .toolbar-item__filter--button {
        padding-top: calc(0.375rem + 1px); // add 1px for the input border.
        i {
          margin: 0;
        }
      }
    }

    .dropdown-toggle {
      color: var(--foreground);
      height: 100%;
      padding: 0.625rem;

      @include media-breakpoint-up(sm) {
        padding: 0.625rem 1rem;
      }

      &:hover,
      &:active,
      &:focus {
        @include darken(--admin-sidebar, 0.02);
      }
    }

    &__brand {
      justify-content: left;
      padding: 0 2rem;

      svg,
      img {
        margin-right: 0.25rem;
      }

      div {
        text-align: left;
      }

      &__new {
        .fas {
          position: relative;
          top: -1px;
        }
      }
    }

    .profile__dropdown {
      hr {
        margin: 0.5rem 0;
      }
    }

    &__profile {
      padding-right: 1rem;

      img {
        max-width: 25px;
        height: 25px;
      }
    }

    &__filter {
      margin-left: auto;
      max-width: 210px;
      margin-right: 1rem;
    }

    &__site {
      display: none;

      @include media-breakpoint-up(sm) {
        display: block;
        padding-top: 0.1rem;
      }

      a {
        height: 100%;
        padding: 0.625rem 1rem;
        font-size: 0.875rem;
        white-space: nowrap;

        @include media-breakpoint-up(sm) {
          padding: 0.85rem 1rem;
        }

        @include media-breakpoint-up(md) {
          font-size: 0.9375rem;
        }
      }

      i,
      .fas {
        margin-right: 0.25rem;
      }
    }
  }
}
