@import url(https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Fira%20Code:wght@400&display=swap);

html {
    /* Base color, used for backgrounds and surfaces */
    --base: #ffffff;
    /* Each color has a corresponding content color for text contrast */
    --base-content: #404040;
    /* Second base color, used for layering on top of the base color */
    --base-2: #eaeaee;
    /* Third base color, used for layering on top of the second base color */
    --base-3: #cecece;
    /* Code color, used for code blocks */
    --code: #e0e0e0;
    --code-content: #202020;
    /* Primary color, used to draw the eye to important items */
    --primary: #2271b3;
    --primary-content: #ffffff;
    /* Secondary color, used for less important items */
    --secondary: #ea580c;
    --secondary-content: #ffffff;
    /* Accent color, used for highlights */
    --accent: #028bb5;
    --accent-content: #000000;
    /* Warning color */
    --warning: #ff9020;
    --warning-content: #000000;
    /* Danger color, used for errors */
    --danger: #ef4444;
    --danger-content: #000000;
    /* Pin color */
    --pin: goldenrod;

    /* Used for development callouts */
    --development: #54d17d;

    /* Used for buttons and other "small" elements */
    --rounded: 6px;
    /* Used for callouts and other "large" elements */
    --rounded-lg: 12px;
}

html {
    font-size: 16px;
    max-width: 100%;
    height: 100%;
}

body {
    display: flex;
    flex-direction: row;

    background-color: var(--base);
    color: var(--base-content);

    font-family: Roboto, sans-serif;
    font-weight: 400;
    line-height: 1.65;

    margin: 0;
    height: 100%;
    overflow: clip;
}

main {
    width: calc(75% - 4rem);
    height: calc(100% - 4rem);
    padding: 2rem;
    overflow: auto;
}

main:has(#api-docs) {
    width: 75%;
    height: 100%;
    padding: 0;
}

article {
    max-width: 54rem;
}

#api-docs {
    flex: 1;
    border: 0;
    z-index: 50;
    height: 100%;
    width: 100%;
}

/* scroll bars */
* {
    --scrollbar-foreground: var(--base-3);
    --scrollbar-background: transparent;
    scrollbar-color: var(--scrollbar-foreground) var(--scrollbar-background);
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background: var(--scrollbar-foreground);
}

::-webkit-scrollbar-track {
    background: var(--scrollbar-background);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: Montserrat, Helvetica, sans-serif;
    margin: 1rem 0 0.5rem;
}

h1 {
    font-size: 3.5rem;
    font-weight: 700;
}

h2 {
    font-size: 2.5rem;
    font-weight: 600;
}

h3 {
    font-size: 2rem;
    font-weight: 500;
}

h4 {
    font-size: 1.5rem;
    font-weight: 500;
}

h5 {
    font-size: 1.25rem;
    font-weight: 500;
}

h6 {
    font-size: 1rem;
    font-weight: 500;
}

blockquote {
    border-left: 8px solid var(--accent);
    padding: 1rem;
}

pre,
code {
    font-family: 'Fira Code', 'Courier New', monospace;
    background-color: var(--code);
    color: var(--code-content);
    padding: 2px 4px;
    border-radius: var(--rounded);
}

a {
    color: var(--accent);
    /* Apply the color to code inside the link */
    --code-content: var(--accent);
    font-weight: 500;
    text-decoration: none;
    position: relative;
}

a::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 3px;
    border-radius: 4px;
    background-color: var(--accent);
    bottom: 0;
    left: 0;
    transform-origin: right;
    transform: scaleX(0);
    transition: transform 0.3s ease-in-out;
}

a:hover::before {
    transform-origin: left;
    transform: scaleX(1);
}

p {
    margin: 1rem 0;
}

/* TODO: figure out how to work with shadow DOMs so this can be moved to callout.js */
docs-callout > p {
    margin: 0;
}

ul,
ol,
pre {
    margin: 0;
}

img,
canvas,
iframe,
video,
svg,
select,
textarea {
    max-width: 100%;
}

/* Hide custom elements that haven't been defined yet. */
:not(:defined) {
    visibility: hidden;
}

table {
    width: 100%;
    border-collapse: separate;
    border: 2px solid var(--primary);
    border-radius: var(--rounded-lg);
    border-spacing: 0;
    overflow: hidden;
    margin: 1rem 0;
}

th,
td {
    padding: 10px;
}

th {
    background-color: var(--primary);
    color: var(--base);
}

tr:nth-child(even) {
    background-color: var(--base-2);
}