/*
 * DO NOT EDIT THIS FILE.
 * See the following change record for more information,
 * https://www.drupal.org/node/3084859
 * @preserve
 */

/**
 * @file
 * Navigation layout overrides for the admin toolbar.
 */

/* cspell:ignore navigationcreate, toolsextra, xxxs */

:root {
  --admin-theme-toolbar-height: 3rem;
  --admin-theme-toolbar-secondary-height: 3rem;
  --admin-theme-scroll-offset: 4.5rem;
  --admin-theme-toolbar-y-offset: var(--admin-theme-toolbar-height);
  --admin-theme-toolbar-x-offset: 0px;
  --admin-theme-sticky-offset: 0px;
  --admin-icon-size-toolbar: 1.25rem;

  @media (min-width: 61em) {
    --admin-theme-toolbar-height: 0px;
    --admin-theme-toolbar-secondary-height: 3.25rem;
    --admin-theme-toolbar-x-offset: var(--drupal-displace-offset-left, 64px);
    --admin-theme-scroll-offset: 8.125rem;
    --admin-theme-sticky-offset: var(--admin-theme-height-sticky);
  }
}

html.admin-toolbar-expanded {
  @media (min-width: 61em) {
    --admin-theme-toolbar-x-offset: var(--drupal-displace-offset-left, 264px);
  }
}

body.gin--navigation {
  --admin-toolbar-sidebar-width: 4rem;
}

[data-admin-toolbar="expanded"] body.gin--navigation {
  --admin-toolbar-sidebar-width: 16.5rem;

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

:is(#extra-specificity-hack, [data-drupal-admin-styles]) {
  --admin-toolbar-font-family: var(--admin-font-family);
  --admin-toolbar-color-white: var(--admin-color-bg-surface);
  --admin-toolbar-color-gray-050: var(--admin-color-bg-surface-nested);
  --admin-toolbar-color-gray-100: var(--admin-color-border-soft);
  --admin-toolbar-color-gray-200: var(--admin-color-border);
  --admin-toolbar-color-gray-800: var(--admin-color-text);
  --admin-toolbar-color-gray-990: var(--admin-color-primary-active);
  --toolbar-button-has-active-child-color: var(--admin-color-primary);
  --toolbar-button-current-color: var(--admin-color-primary);
  --toolbar-button-focus-color: var(--admin-color-primary);
  --admin-toolbar-color-focus: var(--admin-color-focus);
  --admin-toolbar-color-expanded: var(--admin-color-bg-surface-nested);

  &.admin-toolbar-control-bar {
    background: var(--admin-color-bg-surface-nested);
  }

  /* Fix Control Bar hamburger button in dark mode. */
  .admin-toolbar-control-bar__burger path {
    stroke: currentColor;
  }
}

/* Workspaces. */

.toolbar-button--workspaces {
  .gin--dark-mode & {
    --toolbar-button-color: #222330;
    --toolbar-button-hover-color: var(--toolbar-button-color);
    --toolbar-button-focus-color: var(--toolbar-button-color);
  }
}

.toolbar-button--workspaces--live {
  .gin--dark-mode & {
    --toolbar-button-bg: #32cea4;
    --toolbar-button-color: #222330;
    --toolbar-button-hover-color: var(--toolbar-button-color);
    --toolbar-button-focus-color: var(--toolbar-button-color);
    --toolbar-button-hover-bg: #32cea4;
    --toolbar-button-current-bg: #32cea4;
  }
}

:is(#extra-specificity-hack, [data-drupal-admin-styles]) {
  .toolbar-menu__link {
    &:hover {
      color: var(--admin-color-primary);
    }
  }
}