@layer components {
  .post-content {
    & a {
      @apply text-sm font-semibold text-accent-base hover:text-accent-hover;
    }
  }

  .ring-accent {
    @apply outline-none ring-2 ring-offset-2;
    /* FIXME: why doesn't ring-accent-base work? */
    --tw-ring-opacity: 1;
    --tw-ring-color: hsl(var(--color-accent-base) / var(--tw-ring-opacity));
    --tw-ring-offset-color: hsl(var(--color-background-base));
  }

  .rounded-conditional-b-xl {
    border-bottom-right-radius: max(
      0px,
      min(0.75rem, calc((100vw - 0.75rem - 100%) * 9999))
    );
    border-bottom-left-radius: max(
      0px,
      min(0.75rem, calc((100vw - 0.75rem - 100%) * 9999))
    );
  }

  .rounded-conditional-2xl {
    border-radius: max(0px, min(1rem, calc((100vw - 1rem - 100%) * 9999)));
  }

  .rounded-conditional-full {
    border-radius: max(0px, min(9999px, calc((100vw - 1rem - 100%) * 9999)));
  }

  .backdrop-gradient {
    background-image: linear-gradient(
      180deg,
      hsla(0 0% 35.29% / 0) 0%,
      hsla(0 0% 34.53% / 0.034375) 16.36%,
      hsla(0 0% 32.42% / 0.125) 33.34%,
      hsla(0 0% 29.18% / 0.253125) 50.1%,
      hsla(0 0% 24.96% / 0.4) 65.75%,
      hsla(0 0% 19.85% / 0.546875) 79.43%,
      hsla(0 0% 13.95% / 0.675) 90.28%,
      hsla(0 0% 7.32% / 0.765625) 97.43%,
      hsla(0 0% 0% / 0.8) 100%
    );
  }

  .bg-stripes-gray {
    background-image: repeating-linear-gradient(
      -45deg,
      #f3f4f6,
      #f3f4f6 10px,
      #e5e7eb 10px,
      #e5e7eb 20px
    );
  }
}