// -------
// Imports
// -------
@import "../navigation/variables";
@import "../navigation/admin-toolbar";
@import "../navigation/toolbar-menu";
@import "../navigation/toolbar-block";
@import "../navigation/toolbar-link";

// Toolbar Variables
:root {
  --gin-toolbar-height: 39px;
  --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);
  }
}

body.gin--navigation {
  @include mq($to: medium) {
    padding-block-start: var(--gin-toolbar-y-offset) !important;
    padding-inline-start: var(--gin-toolbar-x-offset, 39px) !important;
  }
}

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

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

// Set transition to Gin's to avoid different speeds.
.admin-toolbar ~ .dialog-off-canvas-main-canvas,
.gin--navigation .gin-secondary-toolbar--frontend {
  @media (prefers-reduced-motion: no-preference) {
    transition: margin-inline-start var(--gin-transition-fast), margin-inline-start var(--gin-transition-fast);
  }
}

// ----------
// Navigation
// ----------
.gin--navigation {
  padding-block-start: 0 !important;

  .admin-toolbar {
    font-family: var(--gin-font);
    inset-block-start: 0;
    overflow-y: initial;
    padding-inline: 0;
    padding-block-start: 0;
    border-inline-end: 1px solid var(--gin-border-color-layer);

    // Hide on smaller screens for now as this is not ready yet.
    @include mq($to: medium) {
      display: none;
    }

    // Beta 1
    &::after {
      display: none;
    }
  }

  .admin-toolbar__content {
    padding-block: var(--gin-spacing-xxs);
    padding-inline: var(--gin-spacing-xs);
    margin-block-end: 0;
    overflow-y: auto;
    // Scroll shadow
    background: linear-gradient(var(--gin-bg-layer) 30%, var(--gin-bg-layer)),
    linear-gradient(var(--gin-bg-layer), var(--gin-bg-layer) 80%) 0 100%,
    radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, .15), rgba(0, 0, 0, 0)),
    radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, .15), rgba(0, 0, 0, 0)) 0 100%;
    background-color: var(--gin-bg-layer);
    background-repeat: no-repeat;
    background-attachment: local, local, scroll, scroll;
    background-size: 100% 40px, 100% 40px, 100% 16px, 100% 16px;
  }

  .admin-toolbar__sticky-section {
    position: static;
    width: 100%;
    margin-inline: 0;
    padding-block-start: var(--gin-spacing-xs);
    padding-block-end: 0;
  }

  .admin-toolbar,
  .admin-toolbar__sticky-section {
    background: var(--gin-bg-layer);
  }

  // Navigation header
  .admin-toolbar__header {
    margin-block-end: -.5rem;

    &:has(img) {
      margin-block-end: -1.25rem;
    }
  }

  // Content block
  .toolbar-block__content.toolbar-block__content--content {
    margin-block-start: var(--space-s);
  }

  // Navigation link
  .toolbar-link {
    color: var(--gin-color-text);
    font-weight: normal;
  }

  // Toolbar menu
  .toolbar-menu {
    margin-inline: 0;
  }

  // Focus
  .toolbar-menu__item--level-1 {
    > .toolbar-link {
      padding-block: calc(var(--gin-spacing-xs) + 1px);
      margin-block-end: var(--gin-spacing-xxxs);

      &:focus {
        outline: none;
        box-shadow: 0 0 0 1px var(--gin-color-focus-border), 0 0 0 4px var(--gin-color-focus);
      }
    }

    // Beta 1
    > .toolbar-link--create {
      margin-block-start: var(--gin-spacing-l);
    }

    // Beta 1
    > .toolbar-link--sidebar-toggle {
      margin-block-end: calc(var(--gin-spacing-xxs) * -1);
    }
  }

  .menu-item.current > .toolbar-link {
    color: var(--gin-color-primary);
  }

  // -------
  // Level 1
  // -------

  //Active menu item
  .toolbar-menu__item--level-1.menu-item--expanded,
  .toolbar-menu__item--level-1.current,
  .toolbar-menu__item--level-1.active-path,
  .toolbar-menu__item--level-2.active-path {
    background-color: transparent;

    > .toolbar-link {
      color: var(--gin-color-primary);
      background-color: var(--gin-color-primary-light);

      // Icons
      &::before,
      &::after {
        background: var(--gin-color-primary);

        @media (forced-colors: active) {
          background-color: LinkText;
        }
      }

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

  // Menu item hover
  .toolbar-menu__item--level-1 > .toolbar-link:hover,
  .toolbar-menu__item--level-1 > .toolbar-link:focus,
  .toolbar-menu__item--level-2 > .toolbar-link:hover,
  .toolbar-menu__item--level-2 > .toolbar-link:focus,
  .toolbar-menu__item--level-2 .toolbar-link:hover,
  .toolbar-menu__item--level-2 .toolbar-link:focus,
  .toolbar-menu__item.toolbar-menu__item--expanded:not(.current) > .toolbar-link,
  .toolbar-link--sidebar-toggle:hover,
  .toolbar-link--sidebar-toggle:focus {
    color: var(--gin-color-primary-hover);
    background-color: var(--gin-bg-item-hover);

    // Icons
    &::before,
    &::after {
      background: var(--gin-color-primary);

      @media (forced-colors: active) {
        background-color: LinkText;
      }
    }
  }

  // Hide Drupal 9 block_content links
  .toolbar-menu__item--level-1 > .toolbar-link--manage-fields,
  .toolbar-menu__item--level-1 > .toolbar-link--manage-form-display,
  .toolbar-menu__item--level-1 > .toolbar-link--manage-display,
  .toolbar-menu__item--level-1 > .toolbar-link--manage-permissions,
  .toolbar-menu__item--level-1 > .toolbar-link--delete,
  .toolbar-menu__item--level-1 > .toolbar-link--announcements-feed-announcement,
  .toolbar-menu__item--level-1 > .toolbar-link[class*="toolbar-link--admin-toolbar-tools-extra-"],
  // Beta 1: Hide Admin Toolbar Extra links from Level 1
  .toolbar-menu__item--level-1[data-url*="/media/add/"]
  {
    display: none;
  }

  // -----------
  // Level 2 & 3
  // -----------
  .toolbar-menu__item--level-2,
  .toolbar-menu__item--level-3  {
    font-size: var(--gin-font-size-xs);
  }

  .toolbar-menu__item--level-2.current > .toolbar-link::after,
  .toolbar-menu__item--level-3.current > .toolbar-link::after {
    background-color: var(--gin-color-primary);
  }

  .toolbar-menu__item--level-2 > .toolbar-link::before,
  .toolbar-menu__item--level-3 > .toolbar-link::before,
  .toolbar-menu__item--level-2.menu-item--expanded > .toolbar-menu::before {
    background-color: var(--gin-border-color-layer2);
  }

  .toolbar .toolbar-menu,
  .toolbar .toolbar-icon.toolbar-handle {
    background-color: transparent;
  }

  .toolbar .toolbar-menu .toolbar-menu a {
    color: var(--gin-color-text);
  }

  // Beta 1
  .admin-toolbar__item {
    flex-basis: unset;
    flex-grow: unset;
  }

  .admin-toolbar__item > .toolbar-menu {
    margin-block-start: 0;
  }
}

// Submenu
html:not(.admin-toolbar-expanded) .gin--navigation .cloned-flyout,
html:not(.admin-toolbar-expanded) .gin--navigation .cloned-flyout .toolbar-menu__arrow-ref::before,
html:not(.admin-toolbar-expanded) .gin--navigation .toolbar-menu__item--level-1 > .toolbar-menu-wrapper,
html:not(.admin-toolbar-expanded) .gin--navigation .toolbar-menu__item--level-1.menu-item--expanded > .toolbar-menu-wrapper .toolbar-menu__arrow-ref::before {
  background-color: var(--gin-bg-layer3);
}

.admin-toolbar-expanded .admin-toolbar .admin-toolbar__content .admin-toolbar__item,
.admin-toolbar-expanded .admin-toolbar .admin-toolbar__sticky-section .admin-toolbar__item {
  margin-inline: var(--gin-spacing-xxs);
}

.toolbar-menu__item--to-title {
  padding-inline: 6px;
}

.toolbar-menu__item--level-1 .toolbar-link,
.dashboard-link .toolbar-link {
  padding-inline: 10px;
}

// Fixes a quirk when the toolbar
// module is still active
.toolbar-anti-flicker.toolbar-loading.toolbar-fixed body.gin--navigation,
.toolbar-anti-flicker.toolbar-loading.toolbar-fixed.toolbar-horizontal.toolbar-tray-open body.gin--navigation {
  padding-block-start: 0;
}

// --------------
// Text overflow
// --------------
.toolbar-menu .toolbar-link--has-icon {
  &,
  .toolbar-link__label {
    text-overflow: ellipsis;
    overflow: hidden;
  }

  &::before,
  &::after {
    flex-shrink: 0;
  }
}

// --------------
// Sidebar toggle
// --------------
button.toolbar-link--sidebar-toggle {
  background: var(--gin-bg-layer2);

  &::before {
    opacity: .75;
    position: relative;
    mask-size: var(--space-s) var(--space-s);

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

  &:hover::before,
  &:active::before,
  &:focus::before {
    opacity: 1;
  }

  &[aria-expanded=false]::before {
    inset-inline-start: 1px;
    transform: rotate(-90deg);
  }

  &[aria-expanded=true]::before {
    inset-inline-start: -1px;
    transform: rotate(90deg);
  }
}

// --------------
// Icon overrides
// --------------

.toolbar-link--has-icon {
  --icon: #{icon('fallback')}; /* Default icon, aka --basic */

  &::before {
    width: var(--gin-icon-size-toolbar);
    height: var(--gin-icon-size-toolbar);
    background-color: var(--gin-icon-color);
    mask-size: 100% 100%;
  }

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

// Beta 1: Logo
.admin-toolbar__logo {
  margin: 0;
  overflow: unset;

  img {
    width: 40px;
    height: auto;
  }

  .toolbar-link:not(.toolbar-link--gin-home) {
    padding: var(--gin-spacing-xxs) !important;
    margin-block-start: var(--gin-spacing-xxs);
  }

  // Custom Gin Home logo
  .toolbar-link--gin-home {
    color: var(--gin-bg-layer2);
    box-sizing: border-box;
    width: 40px;
    height: 40px;
    max-width: 40px;
    padding: 10px !important;
    margin-block: 6px 0 !important;
    margin-inline: var(--gin-spacing-xxs) !important;

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

      @media (forced-colors: active) {
        background: CanvasText !important;
      }
    }

    &::before {
      --icon: #{icon('drupal')};
      background: var(--gin-bg-layer2) !important;

      @media (forced-colors: active) {
        background: Canvas !important;
      }
    }

    span {
      display: none;
    }

    // Navigation expanded
    .admin-toolbar-expanded & {
      margin-inline-start: 0;

      &::before {
        margin-inline-end: 0;
      }
    }
  }
}

// Beta 1
.admin-toolbar__content .toolbar-block:nth-last-child(n+2)::after {
  margin-block-start: calc(var(--gin-spacing-s) - var(--gin-spacing-xxs));
  padding-block-start: calc(var(--gin-spacing-xs) + var(--gin-spacing-xxs));
  content: "";
  display: block;
  border-block-start: 1px solid var(--gin-border-color-table);
}

@import "../helpers/toolbar-icons";

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

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

// ---------
// User menu
// ---------

// Hide user menu in favor
// of secondary one
.gin--navigation .toolbar-link--user {
  display: none !important;
}

// -----------------------
// Hide Toolbar on desktop
// -----------------------
#toolbar-administration {
  .toolbar-menu__item--level-1 {
    display: block;
  }

  .menu-item {
    font-weight: var(--gin-font-weight-normal);
  }

  // Show toolbar on smaller screens for now as this is not ready yet.
  @include mq(medium) {
    display: none;
  }
}

.toolbar-menu__title,
.toolbar-menu__sub-title,
.toolbar-menu__trigger {
  display: none !important;
}