supabase/apps/docs/styles/globals.css

@import 'config/tailwind.config.css';
@import './../../../packages/ui/build/css/themes/faux-classic-dark.css';

@source '../app/**/*.{ts,tsx,mdx}';
@source '../components/**/*.tsx';
@source '../content/**/*.{ts,tsx,mdx}';
@source '../docs/**/*.{tsx,mdx}';
@source '../features/**/*.{ts,tsx,mdx}';
@source '../layouts/**/*.tsx';
@source '../pages/**/*.{tsx,mdx}';
@source './../../../packages/ui/src/**/*.{tsx,ts,js}';
@source './../../../packages/ui-patterns/src/**/*.{tsx,ts,js}';

@layer utilities {
  .prose--remove-p-margin p {
    margin: 0;
  }
}

@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: hsl(var(--border-default, currentColor));
  }
}

@font-face {
  font-family: 'custom-font';
  src:
    url(../../../packages/common/assets/fonts/CustomFont-Book.woff2) format('woff2'),
    url(../../../packages/common/assets/fonts/CustomFont-Book.woff) format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'custom-font';
  src:
    url(../../../packages/common/assets/fonts/CustomFont-Medium.woff2) format('woff2'),
    url(../../../packages/common/assets/fonts/CustomFont-Medium.woff) format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --sidebar-width: 300px;
  --header-height: 50px;
}

body {
  @apply bg-background text-foreground;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background-color: #6ee7b7 !important;
  color: #333 !important;
}

/* a { */
/*   text-decoration: none !important; */
/* } */

article h1 {
  /* margin-bottom: 2rem !important; */
  /* font-size: 3rem !important; */
  /* font-weight: 400 !important; */
}

.thin-scrollbar {
  scrollbar-width: thin;
}

.sidebar-width {
  width: var(--sidebar-width);
}

.docs-width {
  max-width: calc(100% - var(--sidebar-width));

  @media screen and (max-width: 1024px) {
    max-width: none;
  }
}

.width-full {
  width: 100% !important;
}

.p:not(.prose *):not(.overwrite) {
  @apply text-foreground-light;
  margin-bottom: 16px;
}

.small:not(.prose *):not(.overwrite) {
  @apply text-foreground-muted text-xs;
}

.prose :where(p):not(:where([class~='not-prose'] *)) {
  white-space: pre-line;
}

code[class*='language-'],
pre[class*='language-'] {
  text-shadow: none !important;
}

/* Spec doc specifics ported from docusaurus */
/* @TODO these should be converted to Tailwind classes */

.method-list-item {
  @apply border-t border-gray-400;
  .method-list-item-label {
    @apply flex items-center gap-1;
  }
  .method-list-item-label-name {
    @apply font-mono font-bold text-sm py-2;
  }
  .method-list-item-label-badge {
    @apply font-mono text-xs px-1;
    overflow-wrap: anywhere;
  }
  .method-list-item-validation {
    @apply flex flex-wrap gap-2 items-center;
  }
  .method-list-item-description {
    @apply text-sm space-y-2;
  }
}

.method-list-title-isChild {
  font-family: var(--custom-font-size-xs);
  & h5 {
    font-weight: 200;
  }
}

.method-list-item-validation {
  code {
    @apply text-xs bg-control rounded-sm;
    padding: 1px 6px;
  }
}

.method-list-group {
  @apply p-0 m-0 list-none border-b;
}

.method-list-group .method-list-group {
  @apply border border-overlay rounded-md;
  margin-bottom: 20px;
  max-width: 600px;
}

.method-list-group .method-list-group li {
  margin-top: 0;
  padding: 12px;
  border-bottom: none;
}
.method-list-title {
  margin: 0;
  padding: 6px 12px;
}
.method-list-group .method-list-group li div,
.method-list-group .method-list-group li h4,
.method-list-group .method-list-group li p {
  padding: 0;
  margin: 0;
}
.method-list-group .method-list-group li h4 {
  margin-bottom: 4px;
}

/* These should move to their own components */
/* wasn't able to get an import path working */
.parent-menu-toggle.active {
  svg {
    transform: rotate(90deg);
  }
}

/* ToC styles */
/* .toc__menu-item--active { */
/*   color: hsl(var(--brand-default)) !important; */
/* } */

.video-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;

  iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }
}

.admonition-content > p {
  @apply m-0;
}

/* format <code> inside <p> */
h2 code,
h3 code,
h4 code {
  word-break: keep-all !important;
  white-space: nowrap !important;
  padding: 0.1rem 0.35rem !important;

  &:before {
    display: none;
  }
  &::after {
    display: none;
  }
}

/* code inside admonitions */
.admonition-content p code {
  @apply bg-control;
  word-break: keep-all !important;
  white-space: nowrap !important;
}

article p strong {
  color: inherit !important;
}

/* fix box shadow when <code> is inside <a> */
a:has(code) {
  box-shadow: none !important;
}

/* fix code line wrapping */
/* need to set this to happen from medium onwards, otherwise the would cause horizontal scroll */
article p code {
  &::before,
  &::after {
    display: none !important;
  }
}

.short-inline-codeblock {
  word-wrap: break-word;
  @media screen and (min-width: 769px) {
    white-space: pre !important;
  }
}

/* fix firefox issue with li wrapping */
.doc-content-container ul li div.relative {
  display: inline-block;
}

/* fix ToC links when they have <code> inside */
.toc-menu li a code {
  background: none;
  border: none;
}

/*
 * sets the image in @Next/Image components to respect the height of the content
 */
.next-image--dynamic-fill {
  width: 100%;
  grid-column: 1 / -1;
}
.next-image--dynamic-fill > span {
  position: relative !important;
}
.next-image--dynamic-fill img {
  object-fit: contain;
  width: 100% !important;
  position: relative !important;
  height: unset !important;
}

#docs-content-container #introduction {
  @apply scroll-mt-60;
}

/* dat.GUI */

.dg.ac {
  z-index: 9999 !important;
}

/* tables */

th code {
  @apply text-nowrap;
}

/*
 * Prevents very long code lines (checksums, URLs, etc., from breaking table
 * widths
 */
.prose :where(td) code {
  @apply break-all;
}

/* Zoomable image */

[data-rmiz-modal]:focus,
[data-rmiz-modal-overlay]:focus {
  outline: none !important;
}

[data-rmiz-modal-overlay],
[data-rmiz-modal-img] {
  transition-timing-function: cubic-bezier(0.24, 0.25, 0.05, 1) !important;
}
[data-rmiz-modal-overlay='visible'] {
  background-color: hsl(var(--background-default)) !important;
  opacity: 0.8;
}
[data-rmiz-modal-img] {
  image-rendering: high-quality;
}

.skip-link {
  @apply sr-only;
}
.skip-link:focus {
  @apply not-sr-only;
}

/* Code blocks need margin applied when in content container */
.prose :where(.shiki:not(.shiki-wrapper *), .shiki-wrapper) {
  margin-block: 2rem;
}

/* Code block theme colors for use with Supabase Theme */
[data-theme='dark'],
.dark {
  --code-token-keyword: #bda4ff;
  --code-foreground: #ffffff;
  --code-token-constant: #3ecf8e;
  --code-token-string: #ffcda1;
  --code-token-comment: #7e7e7e;
  --code-token-parameter: #ffffff;
  --code-token-function: #3ecf8e;
  --code-token-string-expression: #ffcda1;
  --code-token-punctuation: #ffffff;
  --code-token-link: #ffffff;
  --code-token-number: #ffffff;
  --code-token-property: #3ecf8e;
  --code-highlight-color: #232323;
}
[data-theme='light'],
.light {
  --code-token-keyword: #6b35dc;
  --code-foreground: hsl(var(--foreground-light) / 1);
  --code-token-constant: #15593b;
  --code-token-string: #f1a10d;
  --code-token-comment: #7e7e7e;
  --code-token-parameter: hsl(var(--foreground-light) / 1);
  --code-token-function: #15593b;
  --code-token-string-expression: #f1a10d;
  --code-token-punctuation: hsl(var(--foreground-light) / 1);
  --code-token-link: hsl(var(--foreground-light) / 1);
  --code-token-number: hsl(var(--foreground-light) / 1);
  --code-token-property: #15593b;
  --code-highlight-color: #1c1c1c;
}

/* Word wrap styles for code blocks */
.shiki[data-wrapped='true'] {
  overflow-x: hidden !important;
}

.shiki[data-wrapped='true'] .code-content {
  white-space: pre-wrap !important;
  word-break: break-word !important;
}