/* Shared highlighted action buttons and the selected All Posts surface. */
:root {
  --highlighted-fill: color-mix(in srgb, white 25%, rgb(10 10 10));
  --highlighted-gloss: .075;
  --highlighted-ink: #fff;
  --highlighted-outline: oklch(.882 .008 61.44 / .05);
}
@media (prefers-color-scheme: light) {
  :root {
    --highlighted-base: color-mix(in srgb, rgb(10 10 10) var(--category-button-darkness, 75%), white);
    --highlighted-fill: color-mix(in srgb, white 25%, var(--highlighted-base));
    --highlighted-gloss: var(--category-button-highlight, .25);
  }
}
:root .button.button-highlighted {
  position: relative;
  isolation: isolate;
}
.button-highlighted { isolation: isolate; }
:is(.button-highlighted,
    .content-page.blog-index-page .blog-categories a[data-category="all"].selected) {
  background: var(--highlighted-surface, var(--highlighted-fill));
  color: var(--highlighted-text, var(--highlighted-ink));
  outline: 1px solid var(--highlighted-outline);
  outline-offset: -1px;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
:is(.button-highlighted,
    .content-page.blog-index-page .blog-categories a[data-category="all"].selected)::before {
  content: "";
  display: block;
  position: absolute;
  pointer-events: none;
  top: 1px;
  left: .4375em;
  right: .4375em;
  height: 45%;
  background: linear-gradient(to bottom, rgb(255 255 255 / var(--highlighted-gloss)), transparent);
  border-radius: 999px 999px .5em .5em;
  filter: blur(1px);
  z-index: -1;
  opacity: var(--highlighted-gloss-opacity, 1);
}

/* Highlighted actions share the ordinary button hover/focus palette. */
.button-highlighted:is(:hover, :focus-visible) {
  --highlighted-surface: var(--foreground-color);
  --highlighted-text: var(--background-color);
  --highlighted-gloss-opacity: 0;
}