alap-link,
#alapelem {
  --alap-bg: var(--light);
  --alap-border: var(--lightgray);
  --alap-border-width: 1px;
  --alap-radius: 6px;
  --alap-shadow: 0 14px 34px rgba(43, 43, 43, 0.14);
  --alap-min-width: 13rem;
  --alap-max-width: min(22rem, calc(100vw - 2rem));
  --alap-z-index: 20;
  --alap-gap: 0.35rem;
  --alap-menu-padding: 0.3rem 0;
  --alap-menu-transition:
    background-color 0.3s ease-in-out,
    border-color 0.3s ease-in-out,
    box-shadow 0.3s ease-in-out;
  --alap-text: var(--darkgray);
  --alap-font: var(--bodyFont);
  --alap-font-size: 0.92rem;
  --alap-font-weight: 600;
  --alap-text-decoration: none;
  --alap-padding: 0.45rem 0.75rem;
  --alap-transition:
    background-color 0.2s ease,
    color 0.2s ease;
  --alap-hover-bg: var(--highlight);
  --alap-hover-text: var(--secondary);
  --alap-focus-ring: var(--secondary);
  --alap-focus-bg: var(--highlight);
  --alap-focus-text: var(--secondary);
  --alap-scrollbar-thumb: var(--gray);
  --alap-scrollbar-track: transparent;
}

alap-link {
  color: var(--secondary);
  cursor: pointer;
  font-weight: 600;
  text-decoration-color: var(--gray);
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-underline-offset: 0.2em;
  transition:
    color 0.3s ease-in-out,
    text-decoration-color 0.3s ease-in-out;
}

alap-link:hover,
alap-link:focus-visible {
  color: var(--tertiary);
  text-decoration-color: currentColor;
}

alap-link::part(menu) {
  background: var(--alap-bg);
  border-color: var(--alap-border);
  box-shadow: var(--alap-shadow);
}

alap-link::part(link) {
  line-height: 1.35;
}

alap-link::part(link):hover,
alap-link::part(link):focus-visible {
  text-decoration: none;
}

#alapelem {
  background: var(--alap-bg);
  border: var(--alap-border-width) solid var(--alap-border);
  border-radius: var(--alap-radius);
  box-shadow: var(--alap-shadow);
  box-sizing: border-box;
  max-width: var(--alap-max-width);
  min-width: var(--alap-min-width);
  padding: var(--alap-menu-padding);
  z-index: var(--alap-z-index);
}

#alapelem a {
  color: var(--alap-text);
  display: block;
  font-family: var(--alap-font);
  font-size: var(--alap-font-size);
  font-weight: var(--alap-font-weight);
  line-height: 1.35;
  padding: var(--alap-padding);
  text-decoration: var(--alap-text-decoration);
  transition: var(--alap-transition);
}

#alapelem a:hover,
#alapelem a:focus-visible {
  background: var(--alap-hover-bg);
  color: var(--alap-hover-text);
  outline: 2px solid transparent;
}

:root[saved-theme="dark"] alap-link,
:root[saved-theme="dark"] #alapelem {
  --alap-shadow: 0 18px 44px rgba(0, 0, 0, 0.46);
}

@media (prefers-reduced-motion: reduce) {
  alap-link,
  #alapelem {
    --alap-menu-transition: none;
    --alap-transition: none;
  }

  alap-link {
    transition: none;
  }
}