@import "../../twui/components/base.css";

@theme inline {
    --font-sans: var(--font-body);
    --font-display: var(--font-space-grotesk);
    --font-mono: var(--font-geist-mono);

    --color-background-dark: #05070b;
    --color-foreground-dark: #f4f7fb;
    --color-background-light: #ffffff;
    --color-foreground-light: #171717;

    --color-dark: #000000;

    --color-primary: #76e4ad;
    --color-primary-hover: #3ecf8e;
    --color-primary-outline: #3ecf8e;
    --color-primary-text: #000000;
    --color-primary-dark: #3ecf8e;
    --color-primary-dark-hover: #3ecf8e;
    --color-primary-dark-outline: #3ecf8e;
    --color-primary-dark-text: #000000;

    --radius-default: 3px;
}

.grid-frame {
    @apply grid bg-foreground-light/10 dark:bg-foreground-dark/10;
    @apply gap-px p-px;
}

.nested-grid-frame {
    @apply bg-background-light dark:bg-background-dark;
    /* @apply bg-foreground-light/10 dark:bg-foreground-dark/10; */
    @apply grid p-0! h-full relative;
    @apply gap-px;
}

.nested-grid-frame::after {
    content: "";
    @apply bg-foreground-light/10 dark:bg-foreground-dark/10;
    @apply absolute top-0 left-0 w-full h-full z-1;
}

.nested-grid-frame .grid-cell {
    @apply relative z-2 h-full;
}

.grid-frame > .grid-cell,
.nested-grid-frame .grid-cell {
    @apply bg-background-light dark:bg-background-dark;
}

.grid-cell-content {
    @apply p-4 xl:p-10;
}

.twui-button,
.twui-button .twui-button-content-wrapper {
    @apply font-semibold;
}

.twui-section {
    @apply p-0!;
}

.twui-stack {
    @apply w-full items-stretch;
}

.twui-button .twui-loading .text-gray {
    @apply text-primary!;
}

.twui-button-primary .twui-loading .fill-primary {
    @apply text-primary-text;
}

.twui-button-primary * {
    @apply text-primary-text font-semibold;
}

.twui-tag-primary {
    @apply bg-foreground-light text-background-light;
    @apply dark:bg-foreground-dark dark:text-background-dark;
}

.twui-h1,
.twui-h2,
.twui-h3 {
    @apply m-0!;
}

.turboci-admin-aside-link {
    @apply w-full border-b-0 xl:border-foreground-light/10 xl:dark:border-foreground-dark/10 py-4 px-6;
    @apply text-foreground-light;
}

.turboci-admin-aside-link.active {
    @apply bg-foreground-light/5 dark:bg-foreground-dark/5;
}

.turboci-admin-aside-link.active * {
    @apply font-semibold;
}

code {
    @apply bg-slate-100 dark:bg-white/10 px-3 py-1 rounded-default;
    @apply my-1;
}

.twui-a {
    @apply border-none;
}

.twui-breadcrumbs-divider {
    @apply rotate-12;
}

#admin-main h1 {
    @apply text-3xl font-semibold;
}

#admin-main h2 {
    @apply text-xl font-semibold;
}

#admin-main h3,
.admin-h3 {
    @apply text-base font-semibold;
}

hr {
    @apply border-foreground-light/10 dark:border-foreground-dark/10;
}

.dotted-link {
    @apply border-b border-dashed border-foreground-light/40 dark:border-foreground-dark/40;
}

.twui-button-primary-outlined * {
    @apply font-semibold;
}
