:is(#extra-specificity-hack, [data-drupal-admin-styles]) {
  .navigation-extra--env,
  .navigation-extra--version {
    --env-background-hover: color-mix(in oklch, var(--env-background), black 8%);
  }

  .navigation-extra--env {
    .admin-toolbar__logo {
      --gin-bg-app: var(--env-color);
      --gin-color-primary: var(--env-background);

      rect {
        fill: var(--env-background);
      }

      path {
        fill: var(--env-color);
      }

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

  .navigation-menu-wrapper.menu--logo .toolbar-link {
    display: inline-flex;
    gap: 0.5rem;
    align-items: center;
  }

  .admin-toolbar__logo {
    display: flex;
    text-decoration: none;
  }

  .navigation-extra--version-logo {
    position: relative;
    display: flex;
    flex: 1 1 0;
    min-width: 0;
  }

  .navigation-extra--version-block-link {
    position: relative;
  }

  .navigation-extra--version-updates {
    --navigation-extra-update-size: 1.4rem;

    position: absolute;
    z-index: 1000;
    inset-block-start: -0.5em;
    inset-inline-end: -0.5em;
    display: grid;
    place-items: center;
    width: var(--navigation-extra-update-size);
    height: var(--navigation-extra-update-size);
    text-decoration: none;
    border: 0;
    background: transparent;

    svg {
      overflow: visible;
      width: 100%;
      height: 100%;
    }

    circle,
    path {
      fill: var(--env-background);
      stroke: var(--env-color);
      stroke-width: 1.5;
    }

    text {
      fill: var(--env-color);
      font-size: 10px;
      font-weight: bold;
    }
  }

  .toolbar-button.navigation-extra--version-link {
    flex: 1 1 0;
    min-width: 0;
    color: var(--env-background);
    background-color: var(--env-color);

    &:hover,
    &:focus,
    &:active {
      color: var(--env-background-hover);
      background-color: var(--env-color);
    }

    &:focus-visible {
      outline-color: var(--env-background-hover);
    }
  }

  .toolbar-button.toolbar-button--collapsible.navigation-extra--version-link .toolbar-button__label {
    display: block;
    overflow: hidden;
    min-width: 0;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}

html[data-admin-toolbar="collapsed"] :is(#extra-specificity-hack, [data-drupal-admin-styles]) {
  .navigation-extra--version-updates {
    background: transparent;

    circle,
    path {
      fill: var(--env-color);
      stroke: var(--env-background);
    }

    text {
      fill: var(--env-background);
    }
  }

  .navigation-extra--version-link {
    display: none;
  }
}

.toolbar-button.toolbar-button--collapsible.navigation-extra--version-link .toolbar-button__label {
  display: block;
  overflow: hidden;
  min-width: 0;
  white-space: nowrap;
  text-overflow: ellipsis;
}