gitbook/packages/gitbook/src/components/DocumentView/Integration/contentkit.css

@reference '../../RootLayout/globals.css';

/** Stacks */
.contentkit-stack {
    @apply flex gap-4;
}

/** Add margin bottom to all stacks that are not the last child and have a form */
.contentkit-stack:not(:last-child):has(.contentkit-form) {
    @apply mb-4;
}

.contentkit-hstack {
    @apply flex-row gap-3 items-center;
}
.contentkit-hstack.contentkit-stack-align-center {
    @apply justify-center;
}
.contentkit-hstack.contentkit-stack-align-end {
    @apply justify-end;
}

.contentkit-vstack {
    @apply flex-col gap-4;
}
.contentkit-vstack.contentkit-stack-align-center {
    @apply items-center;
}
.contentkit-vstack.contentkit-stack-align-end {
    @apply items-end;
}

/** Text */
.contentkit-text.contentkit-text-bold {
    @apply font-bold;
}

.contentkit-text.contentkit-text-italic {
    @apply italic;
}

.contentkit-text.contentkit-text-code {
    @apply font-mono;
}

.contentkit-text.contentkit-text-strikethrough {
    @apply line-through;
}

/** Webframe */
.contentkit-webframe {
    @apply relative;
}

/** Card */
.contentkit-card {
    @apply flex flex-col border rounded border-tint-subtle;
}
.contentkit-card.contentkit-card-pressable {
    @apply cursor-pointer hover:border-tint-hover;
}

.contentkit-card-header {
    @apply flex flex-row gap-4 px-4 py-2 items-center;
}

.contentkit-card-header-content {
    @apply flex-1;
}

.contentkit-card-title {
    @apply text-base font-medium text-tint-strong;
}

.contentkit-card-icon {
    /* unstyled */
}

.contentkit-card-buttons {
    @apply flex flex-row gap-2;
}

.contentkit-card-body {
    @apply m-4;
}

.contentkit-card-header + .contentkit-card-body {
    @apply mt-2;
}

/** Image */
.contentkit-image {
    @apply w-4 h-4 object-cover;
}

/** Buttons */
.contentkit-button {
    @apply text-sm px-3 h-8 text-center inline-block py-1.5 rounded-md straight-corners:rounded-none place-self-start ring-1 ring-tint hover:ring-tint-hover shadow-sm shadow-tint dark:shadow-tint-1 hover:shadow-md active:shadow-none contrast-more:ring-tint-12 contrast-more:hover:ring-2 contrast-more:hover:ring-tint-12 hover:scale-105 active:scale-100 transition-all grow-0 shrink-0 truncate w-full;
}

.contentkit-button-style-primary {
    @apply bg-primary-original text-contrast-primary-original hover:bg-primary-solid-hover hover:text-contrast-primary-solid-hover ring-0 contrast-more:ring-1;
}

.contentkit-button-style-secondary {
    @apply bg-tint text-tint hover:bg-tint-hover hover:text-primary contrast-more:bg-tint-subtle;
}

.contentkit-button .contentkit-icon {
    @apply w-4 h-4;
}

.contentkit-button-loading {
    @apply size-5 flex mx-auto animate-spin;
}

/** Modals */
.contentkit-modal-backdrop {
    @apply fixed inset-0 z-40 px-7 pb-11 pt-4 md:pt-[min(8vw,6rem)] flex items-start justify-center backdrop-blur-2xl bg-tint-12/4 dark:bg-tint-1/6;
}
.contentkit-modal {
    @apply flex flex-col gap-6 relative z-50 bg-tint
        rounded shadow-lg opacity-0 transition-opacity duration-300 border border-tint
        w-full max-w-[768px] max-h-[90vh] overflow-y-auto;
}
.contentkit-modal.contentkit-modal-opened {
    @apply opacity-[1];
}

.contentkit-modal-header {
    @apply flex flex-col gap-2 px-4 py-2;
}

.contentkit-modal-title {
    @apply text-2xl font-medium text-tint-strong;
}

.contentkit-modal-body {
    @apply px-4 py-4;
}

.contentkit-modal-header + .contentkit-modal-body {
    @apply pt-0;
}

/** Markdown */
.contentkit-markdown {
    @apply prose dark:prose-invert prose-sm;
}
.contentkit-markdown > *:first-child {
    @apply mt-0;
}
.contentkit-markdown > *:last-child {
    @apply mb-0;
}

/** Text input */
.contentkit-textinput {
    @apply w-full circular-corners:rounded-3xl ring-primary-hover rounded-corners:rounded-lg border border-tint text-tint-strong transition-all placeholder:text-tint/8 flex resize-none flex-1 px-2 py-1.5 text-sm bg-tint-base whitespace-pre-line;
    @apply shadow-tint/6 depth-subtle:focus-within:-translate-y-px depth-subtle:shadow-sm depth-subtle:focus-within:shadow-lg dark:shadow-tint-1;
    @apply focus:border-primary-hover focus:shadow-primary-subtle focus:ring-2 hover:border-tint-hover focus:hover:border-primary-hover;
    @apply disabled:cursor-not-allowed disabled:border-tint-subtle disabled:bg-tint-subtle;
}

/** Form */
.contentkit-form {
    @apply flex flex-col gap-1;
}

.contentkit-form:not(:first-of-type) {
    @apply mt-4;
}

.contentkit-label {
    @apply text-sm font-medium text-tint-strong;
}

/** Dividers */
.contentkit-divider {
    @apply border-tint-subtle;
}

.contentkit-vstack > .contentkit-divider {
    @apply border-t h-0 w-full;
}
.contentkit-vstack > .contentkit-divider-small {
    @apply my-0;
}
.contentkit-vstack > .contentkit-divider-large {
    @apply my-4;
}

.contentkit-hstack > .contentkit-divider {
    @apply border-l h-full w-0;
}
.contentkit-hstack > .contentkit-divider-small {
    @apply mx-0;
}
.contentkit-hstack > .contentkit-divider-large {
    @apply mx-4;
}

/** Confirmation modal */

.contentkit-modal-confirm {
    @apply p-4;
}
.contentkit-modal-confirm .contentkit-modal-footer {
    @apply flex gap-2 justify-end;
}
.contentkit-button-confirm {
    @apply w-auto flex-grow-0 flex-shrink-0;
}
.contentkit-button-style-danger {
    @apply bg-danger text-danger hover:bg-danger-hover hover:text-danger-strong contrast-more:bg-tint-subtle;
}