/* stylelint-disable-next-line plugin/no-unsupported-browser-features */
/* Do not use this */
/* Use this */
go-nav-link {
  /**
    @prop --nav-link-padding:
      padding on nav link
      - default: 0.25em 0
  */
  --nav-link-padding: 0.25em 0;
  /**
    @prop --nav-link-current-bar-width:
      width of underline on current nav link
      - default: 2px
  */
  --nav-link-current-bar-width: 0.125rem;
  /**
    @prop --nav-link-current-bar-color:
      color of underline on current nav link
      - default: currentColor
  */
  --nav-link-current-bar-color: currentColor;
  /**
    @prop --nav-link-hover-fg-color:
      text color on hover
      - default: var(--go-color-link-hover)
  */
  --nav-link-hover-fg-color: var(--go-color-link-hover);
  /**
    @prop --nav-link-hover-bg-color:
      background color on hover
      - default: var(--go-color-link-hover-bg)
  */
  --nav-link-hover-bg-color: var(--go-color-link-hover-bg);
  /**
    @prop --nav-link-arrow-gap:
      gap between arrow icon and link text
      - default: var(--go-base-spacing)
  */
  --nav-link-arrow-gap: var(--go-base-spacing);
  /**
    @prop --nav-link-arrow-color:
      icon color on nav link
      - default: currentColor
  */
  --nav-link-arrow-color: currentColor;
  /**
    @prop --nav-link-arrow-color-hover:
      icon color on hover
      - default: currentColor
  */
  --nav-link-arrow-color-hover: currentColor;
  /**
    @prop --nav-link-align-y:
      vertical alignment of icon and text
      - default: flex-start
  */
  --nav-link-align-y: flex-start;
  /**
    @prop --nav-link-radius:
      border radius of nav link
      - default: var(--radius-2)
  */
  --nav-link-radius: var(--radius-2);
  /**
    @prop --nav-link-bg-color:
      background color of nav link
      - default: var(--go-color-neutral-200)
  */
  --nav-link-bg-color: var(--go-color-neutral-200);
  /**
    @prop --nav-link-text-color:
      text color of nav link
      - default: var(--go-color-darkest)
  */
  --nav-link-text-color: var(--go-color-darkest);
  /**
    @prop --nav-link-description-fs:
    font size of description
    - default: 0.85em
  */
  --nav-link-description-fs: 0.85em;
  /**
    @prop --nav-link-description-fw:
    font weight of description
    - default: normal
  */
  --nav-link-description-fw: normal;
  /**
    @prop --nav-link-description-color:
    color of description
    - default: var(--go-color-neutral-800)
  */
  --nav-link-description-color: var(--go-color-neutral-800);
  --nav-link-description-color-hover: var(--go-color-neutral-700);
  --nav-link-current-fw: 700;
  --nav-link-current-text-color: var(--go-color-neutral-200);
  --nav-link-current-bg-color: var(--go-color-darkest);
  --nav-link-current-description-color: var(--go-color-neutral-300);
  --nav-link-text-decoration: underline;
  display: inline-flex;
  align-items: var(--nav-link-align-y);
  color: var(--go-color-link);
  position: relative;
}
go-nav-link[block] {
  display: flex;
}
go-nav-link[block] go-link {
  display: block;
  flex: 1;
}
go-nav-link[block] .nav-item-link {
  display: flex;
  align-items: var(--nav-link-align-y);
  width: 100%;
}
go-nav-link .nav-item-link {
  transition: background var(--go-duration-normal) var(--go-timing-function);
  display: inline-flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: var(--nav-link-padding);
  border-radius: var(--nav-link-radius);
  text-decoration: none;
}
@media (prefers-reduced-motion: reduce) {
  go-nav-link .nav-item-link {
    transition-duration: 0s;
  }
}
go-nav-link .nav-item-link go-icon {
  text-decoration: none;
}
go-nav-link .nav-item-link .nav-link-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  line-height: 1.25;
}
go-nav-link .nav-item-link .nav-link-text .nav-link-text-description {
  font-size: var(--nav-link-description-fs);
  font-weight: var(--nav-link-description-fw);
  color: var(--nav-link-description-color);
  text-decoration: none;
}
go-nav-link .nav-item-link.current {
  color: var(--nav-link-current-text-color);
  background: var(--nav-link-current-bg-color);
}
go-nav-link .nav-item-link.current .nav-link-text-label {
  font-weight: var(--nav-link-current-fw);
  text-decoration: none;
}
go-nav-link .nav-item-link.current .nav-link-text-description {
  color: var(--nav-link-current-description-color);
}
go-nav-link a.nav-item-link svg.external-link-icon {
  flex: 0 0 auto;
  transform: none;
}
go-nav-link a.nav-item-link .arrow {
  transition: transform var(--go-duration-normal) var(--go-timing-function);
  stroke: var(--nav-link-arrow-color);
  flex: 0 0 auto;
  height: 1.25em;
  margin-left: calc(var(--nav-link-arrow-gap) + 0.25rem);
  transform: translateX(-0.25rem);
}
@media (prefers-reduced-motion: reduce) {
  go-nav-link a.nav-item-link .arrow {
    transition-duration: 0s;
  }
}
go-nav-link a.nav-item-link .nav-link-text-label {
  -webkit-text-decoration: var(--nav-link-text-decoration);
          text-decoration: var(--nav-link-text-decoration);
  text-underline-offset: 0.2em;
}
go-nav-link a.nav-item-link:hover, go-nav-link a.nav-item-link:focus-visible {
  background-color: var(--nav-link-bg-color);
  color: var(--nav-link-text-color);
}
go-nav-link a.nav-item-link:hover .nav-link-text .nav-link-text-label, go-nav-link a.nav-item-link:focus-visible .nav-link-text .nav-link-text-label {
  text-decoration: none;
}
go-nav-link a.nav-item-link:hover .nav-link-text .nav-link-text-description, go-nav-link a.nav-item-link:focus-visible .nav-link-text .nav-link-text-description {
  color: var(--nav-link-description-color-hover);
}
go-nav-link a.nav-item-link:hover .arrow, go-nav-link a.nav-item-link:focus-visible .arrow {
  transform: translateX(0);
}
go-nav-link a.nav-item-link::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}