axonyx-ui 0.0.48

* {
    box-sizing: border-box;
}

html,
body {
    min-height: 100%;
}

body {
    margin: 0;
    background:
        radial-gradient(circle at top, color-mix(in srgb, var(--ax-cyan) 9%, transparent) 0%, transparent 32rem),
        linear-gradient(180deg, color-mix(in srgb, var(--ax-bg) 88%, black) 0%, var(--ax-bg) 100%);
    color: var(--ax-text);
    font-family: var(--ax-font-sans);
}

[data-ax-root='page'] {
    min-height: 100vh;
    padding: var(--ax-space-2xl) var(--ax-space-md);
}

.ax-container {
    width: min(100% - 2rem, var(--ax-container-xl));
    margin-inline: auto;
}

.ax-container[data-fluid='true'] {
    width: 100%;
    max-width: none;
}

.ax-container[data-padding='none'] {
    width: min(100%, var(--ax-container-xl));
}

.ax-container[data-padding='sm'] {
    width: min(100% - 1rem, var(--ax-container-xl));
}

.ax-container[data-padding='lg'] {
    width: min(100% - 3rem, var(--ax-container-xl));
}

.ax-container[data-max='sm'] {
    max-width: var(--ax-container-sm);
}

.ax-container[data-max='md'] {
    max-width: var(--ax-container-md);
}

.ax-container[data-max='lg'] {
    max-width: var(--ax-container-lg);
}

.ax-container[data-max='xl'] {
    max-width: var(--ax-container-xl);
}

.ax-grid {
    display: grid;
}

.ax-grid[data-cols='1'] {
    grid-template-columns: 1fr;
}

.ax-grid[data-cols='2'] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ax-grid[data-cols='3'] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ax-grid[data-cols='4'] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ax-grid[data-cols='5'] {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.ax-grid[data-cols='6'] {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.ax-grid[data-min='sm'] {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}

.ax-grid[data-min='md'] {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}

.ax-grid[data-min='lg'] {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
}

.ax-grid[data-gap='sm'] {
    gap: var(--ax-space-sm);
}

.ax-grid[data-gap='md'] {
    gap: var(--ax-space-md);
}

.ax-grid[data-gap='lg'] {
    gap: var(--ax-space-lg);
}

.ax-grid[data-gap='xl'] {
    gap: var(--ax-space-xl);
}

.ax-grid[data-align='start'] {
    align-items: start;
}

.ax-grid[data-align='center'] {
    align-items: center;
}

.ax-grid[data-align='end'] {
    align-items: end;
}

.ax-stack {
    display: grid;
}

.ax-stack[data-gap='sm'] {
    gap: var(--ax-space-sm);
}

.ax-stack[data-gap='md'] {
    gap: var(--ax-space-md);
}

.ax-stack[data-gap='lg'] {
    gap: var(--ax-space-lg);
}

.ax-stack[data-gap='xl'] {
    gap: var(--ax-space-xl);
}

.ax-stack[data-align='start'] {
    justify-items: start;
}

.ax-stack[data-align='center'] {
    justify-items: center;
}

.ax-stack[data-align='end'] {
    justify-items: end;
}

.docs-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
}

[data-recipe='app-shell'] {
    display: grid;
    gap: 1.25rem;
}

[data-recipe='hello-shell'] {
    gap: 1.5rem;
}

[data-recipe='app-frame'] {
    gap: 1.25rem;
}

.ax-container > * + *,
[data-ax-root='page'] > * + * {
    margin-top: var(--ax-space-lg);
}

img {
    max-width: 100%;
    height: auto;
}

@media (max-width: 900px) {
    .ax-grid[data-cols='2'],
    .ax-grid[data-cols='3'],
    .ax-grid[data-cols='4'],
    .ax-grid[data-cols='5'],
    .ax-grid[data-cols='6'] {
        grid-template-columns: 1fr;
    }
}