:root {
  --uno-colors-primary: theme('colors.primary');
  --uno-colors-secondary: theme('colors.secondary');
  --uno-colors-background: theme('colors.background');
}
html {
  --at-apply: 'bg-background c-secondary antialiased';
  scrollbar-width: thin;
  scrollbar-color: oklch(var(--un-preset-theme-colors-secondary) / 0.25) transparent;
  scrollbar-gutter: stable both-edges;
}

/* Fix Flash Issue On iOS */
body {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
body::selection {
  --at-apply: 'bg-highlight';
}

/* Heading Anchor Link */
.heading-anchor-link {
  --at-apply: 'inline-block translate-y-0.1em';
}
h1:hover .heading-anchor-link svg,
h2:hover .heading-anchor-link svg,
h3:hover .heading-anchor-link svg,
h4:hover .heading-anchor-link svg {
  --at-apply: 'op-40';
}
.heading-anchor-link svg {
  --at-apply: 'ml-0.4em aspect-square w-0.9em op-0 transition-opacity ease-out active:scale-90';
}
h1:hover .heading-anchor-link svg:hover,
h2:hover .heading-anchor-link svg:hover,
h3:hover .heading-anchor-link svg:hover,
h4:hover .heading-anchor-link svg:hover {
  --at-apply: 'op-80';
}

/* Highlight Hover Animation */
.highlight-static,
.highlight-hover {
  --at-apply: 'relative inline-block';
}
.highlight-static::after,
.highlight-hover::after {
  content: '';
  --at-apply: 'absolute left-0 z--1 h-0.5em w-full bg-highlight';
}
.highlight-static::after,
.highlight-hover:hover::after {
  --at-apply: 'origin-bottom-left scale-x-100';
}
.highlight-hover::after {
  --at-apply: 'origin-bottom-right scale-x-0 transition-transform ease-out lg:duration-300';
}