// --------------------------------------------------
// Toolbar Variables
// --------------------------------------------------
:root {
  --gin-toolbar-height: 48px;
  --gin-toolbar-secondary-height: 48px;
  --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.
  --gin-icon-size-toolbar: 20px;

  @include mq(medium) {
    --gin-toolbar-height: 0px; // Needs px to work in calc() functions.
    --gin-toolbar-secondary-height: 52px;
    --gin-toolbar-x-offset: var(--drupal-displace-offset-left, 64px);
    --gin-scroll-offset: 130px;
    --gin-sticky-offset: var(--gin-height-sticky);
  }
}

html.admin-toolbar-expanded {
  @include mq(medium) {
    --gin-toolbar-x-offset: var(--drupal-displace-offset-left, 264px);
  }
}

// --------------------------------------------------
// Map CSS3 variables
// --------------------------------------------------
body.gin--navigation {
  --admin-toolbar-sidebar-width: #{rem(64px)};

  [data-admin-toolbar='expanded'] & {
    --admin-toolbar-sidebar-width: #{rem(264px)};

    @media (--admin-toolbar-tablet) {
      --admin-toolbar-sidebar-width: calc(16.5 * var(--admin-toolbar-rem));
    }
  }
}

// This applies to both the sidebar and the control bar on small screens.
[data-drupal-admin-styles] {
  --admin-toolbar-font-family: var(--gin-font);
  --admin-toolbar-color-white: var(--gin-bg-layer);
  --admin-toolbar-color-gray-050: var(--gin-bg-layer2);
  --admin-toolbar-color-gray-100: var(--gin-border-color-layer);
  --admin-toolbar-color-gray-200: var(--gin-border-color-layer2);
  --admin-toolbar-color-gray-800: var(--gin-color-text);
  --admin-toolbar-color-gray-990: var(--gin-color-primary-active);
}

// --------------------------------------------------
// Custom overrides
// --------------------------------------------------

// Core currently hard codes this as 'white' rather than a custom property, so
// we need to fix that to correctly apply dark colours.
.gin--navigation .admin-toolbar-control-bar {
  background-color: var(--admin-toolbar-color-white);
}

// .gin--navigation .gin-secondary-toolbar {
//   margin-block-end: var(--gin-spacing-xxs);
// }

// .gin--navigation .gin-secondary-toolbar--frontend {
//   z-index: 102;
//   margin-inline-start: var(--gin-toolbar-x-offset);
// }

.toolbar-menu__link:hover::before {
  inline-size: var(--gin-spacing-xxs);
}

.admin-toolbar {
  top: 0;
  height: 100%;
}

.admin-toolbar__header {
  padding-block-start: var(--gin-spacing-xs);

  @include mq(large) {
    padding-block-start: 0;
  }
}

.admin-toolbar__content {
  padding: var(--admin-toolbar-sidebar-header) var(--gin-spacing-s) var(--gin-spacing-s) var(--gin-spacing-s);
  margin-block-start: calc(var(--gin-spacing-xxs) * -1);

  @include mq(large) {
    padding: var(--gin-spacing-s);
    margin-block-start: 0;
  }
}

.admin-toolbar__footer {
  gap: 0;
  padding: var(--gin-spacing-s);
}

.admin-toolbar__footer,
.admin-toolbar__content .toolbar-block:nth-last-child(n+2)::after {
  border-block-start-color: var(--gin-border-color-secondary);
}

// --------------------------------------------------
// Logo override
// --------------------------------------------------
.admin-toolbar__logo {
  line-height: 0;
  border-radius: 10px;

  svg rect {
    fill: var(--gin-color-primary);
  }

  svg path {
    fill: var(--gin-bg-app);
  }

  &:hover svg rect {
    fill: var(--gin-color-primary-hover);
  }

  &:active svg rect,
  &:focus svg rect {
    fill: var(--gin-color-primary-active);
  }
}

// --------------------------------------------------
// Button style overrides
// --------------------------------------------------
#navigation-link-navigationcreate {
  margin-block-start: var(--gin-spacing-xxs);
}

.toolbar-block__list {
  gap: 0;
}

.admin-toolbar .toolbar-button {
  min-height: unset;
  padding-inline: 10px;
  padding-block: calc(var(--gin-spacing-xs) + 1px);
  margin-block-end: var(--gin-spacing-xxxs);
}

.admin-toolbar .toolbar-button--primary {
  color: var(--gin-color-button-text) !important;
}

.gin--navigation-top-bar .toolbar-button.toolbar-button {
  padding: var(--gin-spacing-xs) var(--gin-spacing-s);
  min-height: auto;
  border: 0 none;
  border-radius: var(--gin-border-m);
  outline: none;

  @media (prefers-reduced-motion: no-preference) {
    transition: var(--gin-transition);
  }
}

.gin--navigation-top-bar .toolbar-button.toolbar-button--primary {
  --toolbar-button-color: var(--gin-color-button-text);
  --toolbar-button-bg: var(--gin-color-primary);
  --toolbar-button-hover-color: var(--gin-color-button-text);
  --toolbar-button-hover-bg: var(--gin-color-primary-hover);
  --toolbar-button-focus-color: var(--gin-color-button-text);
  --toolbar-button-focus-bg: var(--gin-color-primary-active);
  --toolbar-button-icon-size: var(--gin-font-size-s);
  box-shadow: .1em .25em .5em var(--gin-color-primary-light);
}

.gin--navigation-top-bar .toolbar-button.toolbar-button--icon--dots {
  cursor: pointer;
  color: var(--gin-color-text);
  background: transparent;
  display: block;
  height: 32px;
  width: 32px;
  padding: 6px;
  margin-inline: calc(var(--gin-spacing-xxs) * -1);
  border-radius: var(--gin-border-m);

  @media (prefers-reduced-motion: no-preference) {
    transition: background var(--gin-transition-fast);
  }

  &:hover, &:focus {
    background: var(--gin-color-primary-light);

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

  &[aria-expanded=true],
  &.is-active {
    background-color: var(--gin-color-primary-light-hover);

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

.admin-toolbar .toolbar-button,
.toolbar-menu__link {
  color: var(--gin-color-text);
  font-weight: var(--gin-font-weight-semibold);
  font-variation-settings: unset;

  &,
  &:hover,
  &:active {
    outline: none;
    box-shadow: none;
  }

  &:hover {
    color: var(--gin-color-primary);
    background-color: var(--gin-bg-item-hover);
  }

  &:active,
  &:focus,
  &:hover:focus {
    color: var(--gin-color-primary-hover);
    background-color: var(--gin-color-primary-light);
  }
}

.toolbar-button--large {
  font-weight: var(--gin-font-weight-bold);
}

// --------------------------------------------------
// Focus style overrides
// --------------------------------------------------
[data-drupal-admin-styles] *:focus,
.gin--navigation-top-bar .button:focus,
.gin--navigation-top-bar .local-actions__item *:focus,
.gin--navigation-top-bar .toolbar-button.toolbar-button:focus,
.local-actions__item *:focus,
.admin-toolbar__logo:focus,
.toolbar-button.toolbar-button:focus,
.admin-toolbar__expand-button:focus {
  outline: none;
  box-shadow: var(--focus-ring);
}

.toolbar-menu__link:focus {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--gin-color-focus-border), inset 0 0 0 3px var(--gin-color-focus);
}

// --------------------------------------------------
// Active style overrides
// --------------------------------------------------
.toolbar-button.current {
  background-color: var(--gin-bg-item-hover);

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

  &:active,
  &:focus,
  &:hover:focus {
    background-color: var(--gin-color-primary-light);
  }
}

.toolbar-button.current.is-active,
.toolbar-button:has(+ .toolbar-popover__wrapper .is-active) {
  color: var(--gin-color-primary);
  background-color: var(--gin-color-primary-light);

  .toolbar-button__icon {
    color: var(--gin-color-primary) !important;
  }
}

// --------------------------------------------------
// Icon overrides
// --------------------------------------------------
.gin--navigation .toolbar-button__icon {
  color: var(--gin-icon-color);
  stroke-width: 0.03125rem;
  stroke: currentColor;
  inline-size: 22px;
  block-size: 22px;
  margin: -1px;
}

.gin--navigation .toolbar-button--icon--announcements-feed-announcement .toolbar-button__icon path:not(:first-of-type) {
  stroke-width: 1.325rem;
}

.gin--navigation .toolbar-button--icon--dots path {
  stroke-width: 0.5rem;
}

// --------------------------------------------------
// Create menu: Separate if first item
// --------------------------------------------------
#navigation-link-navigationcreate:first-child {
  margin-block-end: var(--admin-toolbar-space-8);

  &::after {
    content: "";
    display: block;
    margin-block-start: var(--admin-toolbar-space-12);
    border-block-end: 1px solid var(--gin-border-color-secondary);
  }
}

// --------------------------------------------------
// Expand button
// --------------------------------------------------
.admin-toolbar__expand-button {
  margin-block-start: calc(var(--gin-spacing-xs) * -1);

  &,
  &:hover {
    color: var(--gin-color-text-light);
    border-color: var(--gin-border-color);
  }
}

// --------------------------------------------------
// Popover
// --------------------------------------------------
.toolbar-popover--expanded {
  background-color: transparent;

  > .toolbar-button {
    background-color: var(--gin-bg-item-hover);
  }
}

.gin--dark-mode .toolbar-popover__wrapper {
  border-inline-start: 2px solid var(--gin-border-color-secondary);
}

// --------------------------------------------------
// Tooltips
// --------------------------------------------------
.admin-toolbar__tooltip {
  font-size: var(--gin-font-size-xs);
  color: #fff;
  background-color: var(--gin-tooltip-bg);
}

// --------------------------------------------------
// Hide links from Admin Toolbar Extra module
// --------------------------------------------------
.toolbar-block__list-item[id*="navigation-link-admin-toolbar-toolsextra-links"] {
  display: none;
}

// --------------------------------------------------
// Hide Shortcuts & Announcements in primary nav
// --------------------------------------------------
#toolbar-item-shortcuts,
#toolbar-item-announcement
{
  display: none;
}

// --------------------------------------------------
// Hide duplicated Gin secondary items
// --------------------------------------------------
.gin-secondary-toolbar {
  .toolbar-id--toolbar-icon-user {
    display: none !important;
  }

  .toolbar-menu {
    gap: 0;
  }

  // Fixes quirks when the toolbar
  // module is still active
  .toolbar-menu__trigger {
    display: none;
  }

  .toolbar-tray .menu-item + .menu-item {
    border-inline-start: none;
  }
}

// Fix weird shortcuts menu flickering.
.toolbar-loading #toolbar-item-shortcuts-tray,
.toolbar-loading #toolbar-item-shortcuts {
  visibility: hidden;
}
