$topbar: 54px;

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

:is(#extra-specificity-hack, [data-drupal-admin-styles]) {
  &.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: rgba(var(--gin-bg-layer-rgb), .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);
      list-style: none;
    }

    .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;
      }
    }

    button,
    input[type="submit"],
    .action-link--icon-trash.action-link--danger,
    .button.button--danger,
    a.button.button--danger,
    .local-actions__item a {
      font-size: var(--gin-font-size-xs);
      font-weight: var(--gin-font-weight-bold);
      text-decoration: none;
      padding-block: calc(var(--gin-spacing-xs) - var(--gin-spacing-xxxs));
      padding-inline: var(--gin-spacing-s);
      margin-block: 0;
      box-shadow: none;
    }

    .action-link--icon-trash.action-link--danger,
    .button.button--danger,
    a.button.button--danger {
      padding-block: calc(var(--gin-spacing-xs) - 0.5px);
    }
  }
}

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-s);
}