$topbar: 64px;

:root {
  --drupal-displace-offset-top: #{$topbar};
  --admin-toolbar-top-bar-height: #{$topbar};
}

.gin--navigation-top-bar {
  padding-inline: calc(var(--admin-toolbar-sidebar-width) + var(--gin-spacing-m)) var(--gin-spacing-m);
  padding-block: var(--gin-spacing-xxxs);
  min-height: $topbar;
  height: auto;
  border-block-end: 1px solid var(--gin-border-color-layer);
  box-shadow: none;
  opacity: .95;
  background: var(--gin-bg-layer);

  @supports (backdrop-filter: blur()) {
    opacity: .999;
    background: rgb(from var(--layer-background) r g b / 0.8);
    backdrop-filter: blur(12px);
  }

  .gin--high-contrast-mode & {
    background: var(--gin-bg-layer);
    backdrop-filter: none;
  }

  &--offset {
    margin-top: calc(#{$topbar} + var(--gin-spacing-s));
  }

  &:has(.top-bar__tools:not(:empty), .top-bar__context:not(:empty), .top-bar__actions:not(:empty)) {
    display: flex;
  }

  .top-bar__burger {
    align-self: center;
  }

  .top-bar__context {
    gap: var(--gin-spacing-xs);
  }

  .top-bar__actions,
  .local-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gin-spacing-xs);
  }

  .local-actions,
  .local-actions__item,
  .form-actions,
  .gin-sticky-form-actions {
    width: auto;
    margin: 0;
  }

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

  .toolbar-title__icon path {
    fill: var(--gin-color-text);
  }

  .toolbar-button {
    font-size: var(--gin-font-size-xs);
    font-weight: var(--gin-font-weight-semibold);
    font-variation-settings: normal;
  }

  .toolbar-dropdown__menu {
    gap: 0;
    padding: var(--gin-spacing-xs);
    background-color: var(--gin-bg-layer3);
    border-radius: var(--gin-border-l);
    box-sizing: border-box;
    box-shadow: var(--gin-shadow-l2);

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

    .toolbar-dropdown__link {
      font-size: var(--gin-font-size-xs);
      font-weight: var(--gin-font-weight-semibold);
      line-height: 1;
      text-align: start;
      text-decoration: none;
      width: 100%;
      max-width: 240px;
      padding: var(--gin-spacing-s);
      margin: 0 !important;
      border: 0 !important;
      border-radius: var(--gin-border-s);
      box-shadow: none;
      box-sizing: border-box;

      &:hover,
      &:active,
      &:focus {
        color: var(--gin-color-button-text);
        background-color: var(--gin-color-primary);
        outline: none;

        &::before {
          background-color: var(--gin-bg-layer) !important;
        }
      }
    }

    .toolbar-dropdown__item + .toolbar-dropdown__item {
      border: none;
    }
  }
}

body:has(.gin--navigation-top-bar .gin-sticky-form-actions) :where(#gin_sidebar) {
  inset-block-start: $topbar !important;
  height: calc(100% - #{$topbar}) !important;
}

:where(.gin--edit-form) .gin-sticky-form-actions {
  gap: var(--gin-spacing-xs);

  .button {
    margin-right: 0;
  }

  [data-drupal-selector="edit-delete"] {
    display: none;
  }
}

#block-gin-page-title {
  margin-block: var(--gin-spacing-xxs) var(--gin-spacing-s);
}
