.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-extra--version {
  --toolbar-button-color: var(--env-color);
  --gin-color-text: var(--env-color);
  --toolbar-button-bg: var(--env-background);
  --gin-color-primary-light: var(--env-background);

  &:hover {
    --toolbar-button-hover-color: var(--env-color);
    --gin-color-primary: var(--env-color);
    --toolbar-button-hover-bg: var(--env-background-hover);
    --gin-bg-item-hover: var(--env-background-hover);
    --gin-color-primary-light: var(--env-background-hover);
  }

  &:focus,
  &:active {
    --toolbar-button-focus-color: var(--env-color);
    --gin-color-primary-hover: var(--env-color);
    --gin-color-focus: var(--env-color);
    --toolbar-button-current-bg: var(--env-background-hover);
    --gin-color-primary-light: var(--env-background-hover);
  }

  &.is-active {
    --toolbar-button-current-color: var(--env-color);
    --gin-color-primary: var(--env-color);
    --toolbar-button-current-bg: var(--env-background);
    --gin-color-primary-light: var(--env-background);

    &:hover,
    &:active,
    &:focus {
      --toolbar-button-current-bg: var(--env-background-hover);
      --gin-color-primary-light: var(--env-background-hover);
    }
  }

  /* D10 support */
  &[data-icon-text="10"] {
    background-color: var(--env-background);
    color: var(--env-color);

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

    &.is-active {
      background-color: var(--env-background);
      color: var(--env-color);

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