// Toolbar Variables
:root {
  --gin-toolbar-secondary-height: 0px; // Needs px to work in calc() functions.
  --gin-toolbar-height: 39px;
  --gin-scroll-offset: 72px;
  --gin-toolbar-y-offset: var(--gin-toolbar-height);
  --gin-toolbar-x-offset: 0px; // Needs px to work in calc() functions.
  --gin-sticky-offset: 0px; // Needs px to work in calc() functions.

  @include mq(large) {
    --gin-icon-size-toolbar: 16px;
    --gin-scroll-offset: 200px;
  }
}

.toolbar-fixed.toolbar-tray-open:not(.toolbar-vertical) {
  @include mq(medium) {
    --gin-toolbar-y-offset: 78px;
  }
}

.gin--edit-form {
  --ginStickyOffset: var(--ginStickyHeight);
}

.region-breadcrumb {
  margin-top: var(--gin-spacing-m);
}

// Toolbar
.toolbar {
  .toolbar-bar {
    background: #100f10;
    box-shadow: none;
  }
}

.toolbar .toolbar-menu,
.toolbar-horizontal .toolbar-tray .menu-item--expanded,
.toolbar .toolbar-tray {
  background-color: var(--gin-bg-layer);
}

.toolbar-horizontal .toolbar-tray .toolbar-toggle-orientation {
  border-left: 1px solid var(--gin-border-color);
}

.toolbar-tray-horizontal {
  ul {
    li {
      &.menu-item {
        .menu-item {
          border-bottom: 1px solid var(--gin-border-color);
        }
      }
    }
  }
}

// admin_toolbar 3.3.1 fix
.toolbar-tray-horizontal .toolbar-menu .level-1 > .toolbar-box a {
  padding-right: 2.25em;
}

.toolbar-tray-horizontal .toolbar-menu .level-1 > .toolbar-box .toolbar-icon.toolbar-handle {
  top: .75rem;
}

.toolbar-tray-horizontal .level-1 .menu-item--expanded > .toolbar-box a {
  width: 100%;
}

.toolbar-tray a,
.toolbar-tray span,
.toolbar .toolbar-menu .toolbar-menu a,
.toolbar .toolbar-menu .toolbar-menu span {
  color: var(--gin-color-text);

  &:hover {
    color: var(--gin-color-title);
  }
}

.toolbar .toolbar-tray .menu-item--active-trail > .toolbar-box a,
.toolbar .toolbar-tray .menu-item > .toolbar-icon.is-active,
.toolbar .toolbar-tray .menu-item > .toolbar-box > .toolbar-icon.is-active,
.toolbar .toolbar-tray a.is-active {
  color: var(--gin-color-primary);
  font-weight: var(--gin-font-weight-bold);

  &::before {
    background: var(--gin-color-primary);
  }
}

.toolbar .toolbar-tray .menu-item:hover > .toolbar-icon {
  color: var(--gin-color-primary-hover);
  background-color: var(--gin-bg-item-hover);

  &::before {
    background: var(--gin-color-primary);
  }
}

// Inline Edit toggle
#toolbar-bar.toolbar-bar.js-settings-tray-edit-mode {
  background: #100f10;

  .toolbar-icon.toolbar-icon-edit.toolbar-item {
    &,
    &.is-active,
    &:focus {
      background: var(--gin-color-primary);
    }

    &:hover,
    &.is-active:hover {
      background: var(--gin-color-primary-hover);

      &::before {
        background: #fff;
      }
    }
  }
}

.toolbar-tray-horizontal a:focus,
.toolbar-box a:focus,
.toolbar .toolbar-icon.toolbar-handle:focus {
  background-color: var(--gin-bg-layer2);
}

.toolbar-tray-horizontal .menu-item:hover {
  background-color: transparent;
}

.toolbar-menu__trigger,
.toolbar .menu-item-title,
.menu-item-sub-title {
  display: none !important;
}

.gin--dark-mode .toolbar .toolbar-toggle-orientation {
  background-color: var(--gin-bg-layer2);
}

.gin--classic-toolbar {
  .page-wrapper__node-edit-form .layout-region-node-secondary {
    padding-top: var(--gin-toolbar-y-offset); // 39px;
  }

  table.sticky-header {
    @include mq(large) {
      margin-top: 0;
    }
  }
}

.toolbar-menu .menu-item > span {
  padding-left: 2.75em;
}

// Home icon
.toolbar .toolbar-bar .toolbar-icon-admin-toolbar-tools-help {
  width: auto;
  height: 100%;
  text-indent: -999em;

  &:before {
    mask-size: 20px 20px;
  }

  @include mq(medium) {
    &:before {
      left: var(--gin-spacing-m);
    }
  }
}

#toolbar-item-administration-tray {
  box-shadow: 0 0 4px rgba(0,0,0,0.1);

  .toolbar-logo {
    img {
      @include mq(large) {
        max-height: 21px;
      }
    }
  }
}

.toolbar-tray-horizontal ul li.menu-item--expanded ul li.menu-item--expanded,
.toolbar-tray-horizontal .toolbar-menu:not(:first-child) li.menu-item--expanded > a:focus {
  position: relative;

  &:before {
    top: var(--gin-spacing-s);
    right: var(--gin-spacing-s);
  }
}

#admin-toolbar-search-tab .form-item {
  &::before {
    top: 6px;
    left: 26px;
  }
}

#admin-toolbar-search-input {
  padding-left: var(--gin-spacing-xl);
}