---
import { Icon } from '@astrojs/starlight/components';

const { editUrl } = Astro.locals.starlightRoute;
const showEditorDocs = import.meta.env.PUBLIC_SHOW_EDITOR_DOCS === 'true';
---

{
  showEditorDocs && editUrl && (
    <a href={editUrl} class="wiki-edit-link sl-flex print:hidden" target="_blank" rel="noopener noreferrer">
      <Icon name="pencil" size="1.05em" />
      Редактировать страницу
    </a>
  )
}

<style>
  @layer starlight.core {
    .wiki-edit-link {
      gap: 0.45rem;
      align-items: center;
      text-decoration: none;
      color: var(--sl-color-gray-2);
      font-weight: 600;
      font-size: 0.92rem;
      border: 1px solid color-mix(in srgb, var(--sl-color-hairline) 88%, transparent);
      border-radius: 0.18rem;
      padding: 0.4rem 0.8rem;
      background: color-mix(in srgb, var(--sl-color-bg-nav) 90%, transparent);
      transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
    }

    .wiki-edit-link:hover {
      color: var(--sl-color-white);
      border-color: color-mix(in srgb, var(--sl-color-accent) 45%, transparent);
      background: color-mix(in srgb, var(--sl-color-accent-low) 74%, transparent);
    }
  }
</style>
