gitbook/packages/gitbook/src/components/DocumentView/OpenAPI/style.css

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

/* Layout Components */
.openapi-operation,
.openapi-schemas,
.openapi-webhook {
    @apply flex-1 flex flex-col gap-8 mb-14 min-w-0;
}

.openapi-schemas {
    @apply flex flex-col mb-14 gap-0 flex-1;
}

.openapi-schemas-title {
    @apply tabular-nums text-[0.813rem] leading-4 font-mono shrink-0 font-medium text-tint-strong;
}

.openapi-columns {
    @apply grid grid-cols-1 lg:grid-cols-2 gap-6 print-mode:grid-cols-1 justify-stretch;
}

/* Introduction */
.openapi-intro {
    @apply flex flex-col gap-3;
}

.openapi-summary {
    @apply flex flex-col items-start justify-start gap-3 scroll-m-12;
}

.openapi-summary-tags {
    @apply flex flex-row gap-2 mt-[0.75em];
}

.openapi-deprecated,
.openapi-stability {
    @apply py-0.5 px-1.5 min-w-[1.625rem] font-normal w-fit justify-center items-center ring-1 ring-inset ring-tint bg-tint rounded text-sm leading-[calc(max(1.20em,1.25rem))] before:content-none! after:!content-none;
}

.openapi-stability-alpha {
    @apply text-amber-700 dark:text-amber-300 bg-amber-50 dark:bg-amber-900/6 ring-amber-500/5;
}

.openapi-stability-beta {
    @apply text-blue-700 dark:text-blue-300 bg-blue-50 dark:bg-blue-900/6 ring-blue-500/5;
}

.openapi-stability-experimental {
    @apply text-violet-700 dark:text-violet-300 bg-violet-50 dark:bg-violet-900/6 ring-violet-500/5;
}

.openapi-deprecated-sunset-date {
    @apply font-semibold font-mono truncate;
}

.openapi-description.openapi-markdown,
.openapi-description.openapi-markdown code {
    @apply prose-sm;
}

/* Markdown Elements */
.openapi-markdown blockquote {
    @apply !ps-3;
}

.openapi-markdown blockquote > * {
    @apply not-italic;
}

.openapi-markdown blockquote > p {
    @apply before:content-none after:content-none !font-normal;
}

.openapi-markdown code {
    @apply py-px px-1 min-w-[1.625rem] font-normal w-fit justify-center items-center ring-1 ring-inset ring-tint bg-tint rounded   text-sm leading-[calc(max(1.20em,1.25rem))] before:content-none! after:!content-none;
}

.openapi-markdown pre code {
    @apply bg-transparent ring-transparent;
}

/* Markdown Base */
.openapi-markdown {
    @apply prose text-tint-strong prose-p:my-2! dark:prose-invert max-w-none whitespace-normal;
}

.openapi-markdown > *:first-child {
    @apply !mt-0;
}

.openapi-markdown > *:last-child {
    @apply !mb-0;
}

/* Method Tags */
.openapi-method,
.openapi-statuscode {
    @apply rounded uppercase font-mono items-center shrink-0 font-semibold text-[0.813rem] px-1 py-0.5 mr-2 text-tint-12/8 leading-tight align-middle inline-flex ring-1 ring-inset ring-tint-12/1 dark:ring-tint-1/1 whitespace-nowrap;
}

.openapi-method-get,
.openapi-statuscode-success {
    @apply bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-100;
}

.openapi-method-post,
.openapi-statuscode-redirection {
    @apply bg-amber-100 text-amber-800 dark:bg-amber-900 dark:text-amber-100;
}

.openapi-method-put,
.openapi-statuscode-informational {
    @apply bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-100;
}

.openapi-method-patch {
    @apply bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-100;
}

.openapi-method-delete,
.openapi-statuscode-error {
    @apply bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-100;
}

.openapi-method-head,
.openapi-method-options,
.openapi-method-trace {
    @apply bg-tint;
}

/* URL */
.openapi-url {
    @apply font-mono text-sm text-tint;
}

.openapi-url-var {
    @apply text-tint underline underline-offset-2 decoration-tint-subtle;
}

/* Column Layout */
.openapi-column-spec {
    @apply flex flex-col gap-8 flex-1;
}

.openapi-column-preview {
    @apply flex flex-col flex-1 xl:max-2xl:pt-20 lg:py-6 sticky max-h-[calc(100vh-var(--toc-top-offset))] top-(--toc-top-offset);
}

.openapi-column-preview-body {
    @apply flex flex-col shrink overflow-hidden gap-4 print-mode:static;
}

.openapi-column-preview pre {
    @apply max-h-96 print-mode:max-h-none;
}

/* Schema Structure */
.openapi-schema-root {
    /* unstyled */
}

.openapi-schema-root-description.openapi-markdown {
    @apply prose-sm text-balance mt-1.5 text-[0.813rem]! text-tint overflow-hidden font-normal! select-text prose-strong:font-semibold prose-strong:text-inherit;
}

.openapi-section-schemas > .openapi-section-body > .openapi-schema-root-description {
    @apply px-2.5 pt-2.5 mt-0 !text-sm;
}

.openapi-schema-properties {
    @apply flex flex-col;
}

.openapi-schema,
.openapi-disclosure {
    @apply py-2.5 flex flex-col gap-2;
}

.openapi-schema-properties .openapi-schema:last-child {
    @apply border-b-0;
}

/* Schema Presentation */
.openapi-schema-presentation {
    @apply flex flex-col gap-1 font-normal;
}

.openapi-schema-properties:last-child {
    @apply pb-0;
}

.openapi-schema-name {
    /* To make double click on the property name select only the name,
    we disable selection on the parent and re-enable it on the children. */
    @apply select-none text-sm text-balance *:whitespace-nowrap flex flex-wrap gap-y-1.5 gap-x-2.5 items-center;
}

.openapi-schema-name .openapi-deprecated {
    @apply text-xs;
}

.openapi-schema-propertyname {
    @apply select-all font-mono font-semibold text-tint-strong;
}

.openapi-schema-propertyname[data-deprecated="true"] {
    @apply line-through opacity-9;
}

.openapi-schema-discriminator {
    @apply text-primary-subtle/9 text-[0.813rem] lowercase;
}

.openapi-schema-required {
    @apply text-warning-subtle text-[0.813rem] lowercase;
}

.openapi-schema-optional {
    @apply text-tint-subtle text-[0.813rem] lowercase;
}

.openapi-schema-readonly {
    @apply text-primary-subtle/9 text-[0.813rem] lowercase;
}

.openapi-schema-writeonly {
    @apply text-success dark:text-success-subtle/9 text-[0.813rem] lowercase;
}

.openapi-schema-types {
    @apply flex items-baseline flex-wrap gap-1;
}

.openapi-schema-type {
    @apply text-tint select-text text-[0.813rem] font-mono [word-spacing:-0.25rem];
}

.openapi-schema-type:only-child {
    @apply ml-0;
}

/* Schema Header */
.openapi-schema-header {
    @apply flex flex-row items-center;
}

.openapi-schema-intro {
    @apply flex-1;
}

.openapi-schema-circular {
    @apply text-xs text-tint;
}

.openapi-schema-circular a {
    @apply underline;
}

.openapi-schema-circular-glyph {
    @apply text-base;
}

/* Schema Enum */
.openapi-schema-enum {
    @apply text-sm leading-relaxed max-w-full text-tint;
}

.openapi-schema-enum-value {
    @apply text-sm mr-1.5;
}

.openapi-schema-enum-value:first-child {
    @apply rounded-l ml-0;
}

.openapi-schema-enum-value:last-child {
    @apply rounded-r;
}

/* Schema Description */
.openapi-schema-description.openapi-markdown {
    @apply prose-sm text-tint overflow-hidden text-pretty font-normal! select-text prose-strong:font-semibold prose-strong:text-inherit;
}

.openapi-schema-description.openapi-markdown pre:has(code) {
    @apply overflow-x-auto flex-1 w-fit max-w-full h-fit whitespace-pre;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.openapi-schema-description.openapi-markdown pre::-webkit-scrollbar {
    display: none;
}

.openapi-schema-description.openapi-markdown pre code {
    font-weight: inherit !important;
    @apply text-xs !py-0;
}

/* Schema Examples */
.openapi-schema-example,
.openapi-schema-pattern,
.openapi-schema-default {
    @apply prose-sm text-tint;
}

.openapi-schema-example code,
.openapi-schema-pattern code,
.openapi-schema-enum-value code,
.openapi-schema-default code {
    @apply py-px px-1 min-w-[1.625rem] text-tint-strong font-normal w-fit justify-center items-center ring-1 ring-inset ring-tint-subtle bg-tint rounded text-xs leading-[calc(max(1.20em,1.25rem))] before:content-none! after:!content-none;
}

/* Authentication */
.openapi-securities-header {
    @apply py-2 border-b border-tint-subtle max-w-full flex-1;
}

.openapi-securities-oauth-flows {
    @apply flex flex-col gap-3;
}

.openapi-securities-oauth-content,
.openapi-securities-scopes {
    @apply prose *:!prose-sm *:text-tint;
}

.openapi-securities-oauth-content.openapi-markdown code {
    @apply text-xs;
}

.openapi-securities-scopes ul {
    @apply !my-0;
}

.openapi-securities-url {
    @apply ml-0.5 px-0.5 rounded hover:bg-tint transition-colors;
}

.openapi-securities-body {
    @apply flex flex-col gap-2;
}

.openapi-securities-description.openapi-markdown {
    @apply prose-sm text-tint font-normal! select-text text-pretty prose-strong:font-semibold prose-strong:text-inherit;
}

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

/* Parameters */
.openapi-parameters-header {
    @apply py-2 border-b border-tint-subtle max-w-full flex-1;
}

.openapi-parameters-header-content {
    /* unstyled */
}

/* Request Body */
.openapi-requestbody-header {
    @apply py-2 border-b border-tint-subtle max-w-full flex-1;
}

.openapi-requestbody-header-content {
    /* unstyled */
    @apply flex flex-row items-center gap-2.5;
}

.openapi-requestbody-header-type {
    @apply text-tint select-text text-[0.813rem] font-mono font-normal [word-spacing:-0.25rem];
}

.openapi-requestbody-description.openapi-markdown {
    @apply prose-sm text-tint font-normal! text-pretty select-text prose-strong:font-semibold prose-strong:text-inherit;
}

/* Responses */
.openapi-responses-header {
    @apply py-2 max-w-full flex-1;
}

.openapi-responses-header-content {
    /* unstyled */
}

.openapi-response-tab-content {
    @apply flex items-baseline truncate grow shrink max-w-max basis-full mr-auto;
    @apply text-left text-pretty relative leading-tight text-tint select-text;
}

.openapi-response-description.openapi-markdown {
    @apply text-left prose-sm text-sm leading-tight text-tint select-text prose-strong:font-semibold prose-strong:text-inherit;
}

.openapi-disclosure-group-trigger[aria-expanded="false"] {
    .openapi-response-description.openapi-markdown {
        @apply truncate;
        @apply [&>*:not(:first-child)]:hidden *:truncate *:!p-0 *:!m-0;
    }

    .openapi-response-tab-content {
        @apply basis-[60%]
    }
}

.openapi-response-body {
    @apply flex flex-col;
}

/* Response Body and Headers */
.openapi-responsebody .openapi-schema-name {
    @apply mb-0;
}

.openapi-responsebody .openapi-schema-presentation {
    @apply py-0;
}

.openapi-responsebody-header,
.openapi-responseheaders-header {
    @apply px-3 py-1;
}

/* Code Sample */
.openapi-codesample-header {
    @apply flex flex-row items-center;
}

.openapi-response-media-types-examples-footer-content {
    @apply flex flex-row items-center gap-2.5;
}

.openapi-panel-heading,
.openapi-codesample-header,
.openapi-response-examples-header {
    @apply border-b border-tint-subtle;
}

.openapi-response-examples-header .openapi-select > button {
    @apply max-w-full overflow-hidden shrink pl-0.5 py-0.5;
}

.openapi-response-examples-header .openapi-select > button .openapi-statuscode {
    @apply h-full;
}

.openapi-codesample-header-content {
    @apply flex flex-row items-center justify-between h-fit p-2.5;
}

.openapi-codesample-header-content .openapi-path {
    @apply flex items-center font-mono text-[0.813rem] gap-1 h-fit *:truncate overflow-x-auto min-w-0 max-w-full font-normal text-tint-strong;
}

.openapi-codesample-header-content .openapi-path .openapi-path-variable {
    @apply text-[0.813rem];
}

.openapi-codesample-footer {
    @apply flex gap-3 w-full justify-between flex-wrap;
}

.openapi-codesample-selectors {
    @apply flex flex-row items-center gap-3 flex-wrap;
}

/* Path */
.openapi-path {
    @apply flex items-center text-sm gap-2 h-fit overflow-x-auto min-w-0 max-w-full;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.openapi-path-variable {
    @apply p-px min-w-[1.625rem] text-tint-strong font-normal w-fit justify-center items-center ring-1 ring-inset ring-tint bg-tint rounded text-sm leading-none before:content-none! after:!content-none;
}

.openapi-path-server {
    @apply text-tint inline;
}

.openapi-summary .openapi-path .openapi-method {
    @apply m-0 items-center flex px-2 py-1 h-6;
}

.openapi-path-title {
    @apply flex-1 relative font-normal text-left overflow-x-auto font-mono text-tint-strong/10;
    @apply whitespace-nowrap md:whitespace-normal;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.openapi-path-title-row{
    @apply flex flex-row items-center;
}

.openapi-path-title[data-deprecated="true"] {
    @apply line-through;
}

.openapi-path-title::-webkit-scrollbar {
    display: none;
}

.openapi-path-title em {
    @apply not-italic text-primary font-medium;
}

.openapi-path-separator {
    @apply text-tint;
}

.openapi-path-overlay {
    @apply flex flex-row items-center py-2 px-3 justify-end border-t border-tint-subtle;
}

/* Panel */
.openapi-panel,
.openapi-codesample,
.openapi-response-examples {
    @apply border shrink min-h-40 overflow-hidden rounded-md straight-corners:rounded-none circular-corners:rounded-xl bg-tint-subtle border-tint-subtle shadow-sm;
}

.openapi-response-examples-panel {
    @apply flex flex-col shrink overflow-hidden;
}

.openapi-codesample-panel {
    @apply flex flex-col shrink overflow-hidden;
}

.openapi-panel pre,
.openapi-codesample pre,
.openapi-response-examples pre {
    @apply bg-transparent border-none rounded-none shrink shadow-none;
}

.openapi-panel-heading {
    @apply font-medium px-4 py-2 text-xs uppercase;
}

.openapi-panel-body {
    @apply relative;
}

.openapi-panel-footer,
.openapi-codesample-footer {
    @apply px-3 py-2 pt-2.5 border-t border-tint-subtle text-[0.813rem] text-tint empty:hidden;
}

.openapi-panel-footer .openapi-markdown {
    @apply text-[0.813rem] text-tint;
}

/* Example */
.openapi-response-examples-header {
    @apply flex flex-row items-center p-2.5;
}

.openapi-response-examples-header-content {
    @apply max-w-full overflow-hidden truncate;
}

.openapi-response-examples-statuscode-title {
    @apply flex items-center;
}

.openapi-response-examples-header .openapi-select > button,
.openapi-response-examples-header .openapi-markdown,
.openapi-response-examples-statuscode-title {
    @apply text-[0.813rem] truncate text-tint font-normal;
}

.openapi-response-examples-statuscode-label {
    @apply truncate;
}

.openapi-response-examples-panel,
.openapi-codesample-panel {
    @apply flex-1 text-sm relative focus-visible:outline-none;
}

.openapi-example-empty {
    @apply relative text-tint min-h-20 flex flex-col justify-center items-center text-sm;
}

/* Common Elements */
.openapi-select {
    @apply w-auto max-w-full;
}

/* Prevent react-aria popover from setting overflow:auto on body */
body:has(.openapi-select-popover) {
    overflow: unset !important;
}

.openapi-select > button {
    @apply flex items-center font-normal cursor-pointer *:truncate gap-1.5 p-1.5 border border-tint-subtle text-tint-strong rounded leading-none;
    @apply hover:bg-tint-hover transition-all;
}

.openapi-select:not(.openapi-select-unstyled) > button {
    @apply border border-tint-subtle bg-tint text-xs;
}

.openapi-select-unstyled > button {
    @apply p-1;
}

.openapi-select > button[data-focused="true"] {
    @apply outline-primary -outline-offset-1 outline;
}

.openapi-select > button > span.react-aria-SelectValue {
    @apply shrink truncate flex items-center;
}

.openapi-select > button > .react-aria-SelectValue [slot="description"] {
    display: none;
}

.openapi-select > button .openapi-markdown {
    @apply *:leading-none;
}

.openapi-select > button .gb-icon {
    @apply size-2.5 shrink-0;
}

.openapi-select-popover {
    @apply min-w-32 z-10 max-w-[max(20rem,var(--trigger-width))] overflow-x-hidden max-h-52 overflow-y-auto p-1.5 border border-tint-subtle bg-tint-base backdrop-blur-xl rounded-md circular-corners:rounded-xl straight-corners:rounded-none;
    @apply shadow-md shadow-tint-12/1 dark:shadow-tint-1/1;
}

.openapi-select-popover[data-entering] {
    animation: popover-enter 0.2s ease-in-out;
}

.openapi-select-popover[data-exiting] {
    animation: popover-leave 0.2s ease-in-out;
}

.openapi-select-item {
    @apply text-sm flex items-center cursor-pointer px-1.5 overflow-hidden py-1 text-tint ring-0 border-none rounded !outline-none;
    @apply hover:bg-tint-hover hover:theme-gradient:bg-tint-12/1 hover:text-tint-strong contrast-more:hover:ring-1 contrast-more:hover:ring-inset contrast-more:hover:ring-current;
}

.openapi-select-item.openapi-select-item-column {
    @apply flex flex-col gap-1 justify-start items-start;
}

.openapi-select-item [slot="description"] {
    @apply text-xs text-tint-subtle;
}

.openapi-select button .openapi-markdown,
.openapi-select-item .openapi-markdown {
    @apply text-[0.813rem] *:truncate *:!p-0 *:!m-0 [&>*:not(:first-child)]:hidden;
}

.openapi-select-item-selected,
.openapi-select-item-selected .openapi-markdown {
    @apply text-primary-subtle hover:text-primary hover:bg-primary-hover;
    @apply hover:theme-muted:bg-primary-active hover:theme-gradient:bg-primary-active tint:font-semibold;
    @apply contrast-more:text-primary contrast-more:hover:text-primary-strong contrast-more:font-semibold;
}

.openapi-select-listbox {
    @apply flex flex-col gap-1 focus:ring-0 focus:outline-none;
}

.openapi-select:focus {
    width: auto;
}

/* Section Components */
.openapi-section {
    @apply flex flex-col overflow-hidden;
}

.openapi-section-body {
    @apply flex flex-col shrink overflow-hidden;
}

.openapi-section-header {
    @apply flex flex-row items-center;
}

.openapi-section-header-content {
    @apply flex-1 overflow-hidden text-base gap-1.5 flex w-full font-medium text-tint-strong;
}

.openapi-section-header-controls {
    @apply flex flex-row items-center gap-2;
}

.openapi-section-header-content:has(.openapi-section-toggle) {
    @apply cursor-pointer;
}

.openapi-section-header-content:hover .openapi-section-toggle {
    @apply text-tint;
}

.openapi-section-footer {
    @apply flex flex-row items-center p-2.5 gap-2.5 text-sm text-tint-strong border-t border-tint-subtle;
}

.openapi-section-footer-content {
    @apply text-sm text-tint-strong;
}

.openapi-section-toggle {
    @apply text-tint-subtle contrast-more:text-tint-strong;
}

.openapi-section-toggle > svg {
    @apply transition-all;
}

.openapi-section-toggle[aria-expanded="true"] > svg {
    @apply rotate-90;
}

.openapi-section-toggle:focus-visible {
    @apply text-primary;
}

.openapi-section-toggle svg {
    @apply size-3;
}

/* Tabs */
.openapi-panel-header,
.openapi-tabs-list {
    @apply flex flex-row gap-1.5 py-1.5 px-2.5 w-full overflow-x-auto no-scrollbar;
}

.openapi-tabs-tab {
    @apply hover:bg-primary-hover whitespace-nowrap font-mono font-normal tabular-nums hover:text-primary cursor-pointer transition-all relative text-[0.813rem] text-tint px-1 border border-transparent rounded;
}

.openapi-tabs-tab[aria-selected="true"] {
    @apply text-primary-subtle! after:absolute after:-bottom-[calc(0.375rem+1px)] after:z-20 after:left-0 after:w-full after:h-px after:bg-primary-solid after:transition-all;
}

.openapi-tabs-panel {
    @apply flex-1 text-sm relative focus-visible:outline-none;
    @apply before:w-full before:h-px before:absolute before:bg-tint-6 before:-top-px before:z-10;
}

/* Disclosure group */
.openapi-disclosure-group {
    @apply border-tint-subtle transition-all border-b border-x overflow-auto last:rounded-b-md straight-corners:last:rounded-none circular-corners:last:rounded-b-xl first:rounded-t-md straight-corners:first:rounded-none circular-corners:first:rounded-t-xl first:border-t relative;
}

.openapi-disclosure-group:has(.openapi-disclosure-group-trigger:hover) {
    @apply bg-tint-subtle;
}

.openapi-disclosure-group:has(.openapi-disclosure-group-trigger:hover):has(.openapi-select:hover) {
    @apply !bg-transparent;
}

.openapi-disclosure-group-trigger {
    @apply flex w-full cursor-pointer items-baseline gap-3 transition-all relative flex-1 p-3 -outline-offset-1;
}

.openapi-disclosure-group-label {
    @apply flex flex-wrap items-baseline gap-x-3 gap-y-1 flex-1 truncate;
}

.openapi-disclosure-group-trigger[aria-disabled="true"] {
    @apply cursor-default hover:bg-inherit;
}

.openapi-disclosure-group-trigger[aria-disabled="true"] .openapi-disclosure-group-icon {
    @apply invisible;
}

.openapi-disclosure-group-icon > svg {
    @apply size-3 text-tint-subtle transition-all duration-300;
}

.openapi-disclosure-group-trigger:hover > .openapi-disclosure-group-icon svg {
    @apply text-tint-strong;
}

.openapi-disclosure-group-panel {
    @apply px-3 transition-all;
}

.openapi-disclosure-group-trigger[aria-expanded="true"] > .openapi-disclosure-group-label {
    @apply font-medium;
}

.openapi-disclosure-group-trigger[aria-expanded="true"] > .openapi-disclosure-group-icon > svg {
    @apply rotate-90;
}

.openapi-disclosure-group-mediatype:not(:has(.openapi-select)) {
    @apply text-[0.625rem] font-mono shrink-0 grow-0 text-tint-subtle contrast-more:text-tint;
}

/* Disclosure */
.openapi-schemas-disclosure {
    @apply border-t border-x last:border-b border-tint-subtle !ring-0 first:!rounded-t-xl last:!rounded-b-xl !rounded-none;
}

.openapi-schemas-disclosure > .openapi-disclosure-trigger {
    @apply flex items-center font-mono transition-all font-normal text-tint-strong !text-sm hover:bg-tint-subtle relative flex-1 gap-2.5 p-5 truncate -outline-offset-1;
}

.openapi-schemas-disclosure > .openapi-disclosure-trigger,
.openapi-schemas-disclosure .openapi-disclosure-panel {
    @apply straight-corners:!rounded-none;
}

.openapi-disclosure-panel {
    @apply ml-1.5 pl-3 border-l border-tint-subtle;
}

.openapi-schema .openapi-schema-properties .openapi-schema {
    animation: fadeIn 0.2s ease-in-out both;
}

.openapi-schemas-disclosure > .openapi-disclosure-trigger[aria-expanded="true"] > svg {
    @apply rotate-90;
}

.openapi-disclosure-trigger {
    @apply flex flex-row justify-between flex-wrap relative items-start gap-2 text-left -mx-3 px-3 -my-2.5 py-2.5 pr-10;
}

.openapi-disclosure {
    @apply -mx-3 px-3 py-2.5 transition-all flex flex-col ring-tint-subtle;
}

.openapi-disclosure:not(
        .openapi-disclosure-group .openapi-disclosure,
        .openapi-schema-alternatives .openapi-disclosure,
        .openapi-schemas-disclosure .openapi-schema.openapi-disclosure
    ) {
    @apply rounded-xl;
}

.openapi-disclosure .openapi-schemas-disclosure .openapi-schema.openapi-disclosure {
    @apply !rounded-none;
}

.openapi-disclosure:has(> .openapi-disclosure-trigger:hover) {
    @apply bg-tint-subtle overflow-hidden;
}

.openapi-disclosure[data-expanded="true"] {
    @apply ring-1 shadow-sm;
}

.openapi-disclosure[data-expanded="true"]:not(.openapi-schemas-disclosure):not(:first-child) {
    @apply mt-2;
}
.openapi-disclosure[data-expanded="true"]:not(.openapi-schemas-disclosure):not(:last-child) {
    @apply mb-2;
}

.openapi-disclosure-trigger-label {
    @apply absolute right-3 mr-px px-2 h-5 justify-end shrink-0 ring-tint-subtle truncate text-tint duration-300 transition-all rounded straight-corners:rounded-none circular-corners:rounded-xl flex flex-row gap-1 items-center text-xs;
}

.openapi-disclosure-trigger-label span {
    @apply hidden;
}

.openapi-disclosure-trigger-label svg {
    @apply size-3 shrink-0 transition-transform duration-300 text-tint-subtle;
}

.openapi-disclosure-trigger:hover > .openapi-disclosure-trigger-label,
.openapi-disclosure-trigger[aria-expanded="true"] > .openapi-disclosure-trigger-label {
    @apply shadow ring-1 bg-tint-base;
}

.openapi-disclosure-trigger:hover > .openapi-disclosure-trigger-label span,
.openapi-disclosure-trigger[aria-expanded="true"] > .openapi-disclosure-trigger-label span {
    @apply block;
    animation: fadeIn 0.2s ease-in-out both;
}

@media (hover: none) {
    /* Make button label always visible on non-hover devices like phones */
    .openapi-disclosure-trigger-label {
        @apply relative ring-1 bg-tint-base right-0;
    }
    .openapi-disclosure-trigger-label span {
        @apply block;
    }
    .openapi-disclosure-trigger {
        @apply pr-3;
    }
}

.openapi-disclosure-trigger[aria-expanded="true"] svg {
    @apply rotate-45;
}

.openapi-disclosure-trigger[aria-expanded="false"] {
    @apply w-auto;
}

.openapi-section-body.openapi-schema.openapi-schema-root {
    @apply space-y-2.5;
}

.openapi-section-schemas > .openapi-section-body > .openapi-schema-properties > .openapi-schema,
.openapi-section-schemas > .openapi-section-body > .openapi-schema-root {
    @apply p-2.5;
}

.openapi-schema-alternatives {
    @apply ml-1.5 pl-3 border-l border-tint-subtle;
}
.openapi-schema-alternative {
    @apply relative;
}
.openapi-schema-alternative-separator {
    @apply p-0.5 tracking-wide leading-none uppercase text-[0.625rem] text-tint-subtle whitespace-nowrap absolute -left-3 -bottom-2.5 -translate-x-1/2 z-10 bg-tint-base border-y border-tint-subtle -rotate-6;
}

.openapi-tooltip {
    @apply flex items-center gap-1 bg-tint-base border border-tint-subtle text-tint-strong rounded-md straight-corners:rounded-none circular-corners:rounded-lg font-medium px-1.5 py-0.5 shadow-sm text-[13px];
}

.openapi-tooltip svg {
    @apply size-3 text-tint-strong;
}

.openapi-tooltip[data-entering] {
    animation: tooltip-enter 0.2s ease-in-out forwards;
}

.openapi-tooltip[data-exiting] {
    animation: tooltip-leave 0.2s ease-in-out forwards;
}

@keyframes tooltip-enter {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes tooltip-leave {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes popover-enter {
    0% {
        opacity: 0;
        transform: translateY(4px) scale(0.95);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes popover-leave {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateY(4px) scale(0.95);
    }
}

.openapi-copy-button {
    @apply hover:brightness-95 cursor-pointer;
}

.openapi-copy-button[data-disabled="true"] {
    @apply cursor-default;
}

.openapi-path-copy-button {
    @apply p-1 flex rounded-md;
    @apply hover:bg-tint;
}

.openapi-path-copy-button-icon {
    @apply size-6 flex opacity-0 transition-all;
}

.openapi-path:hover .openapi-path-copy-button-icon {
    @apply opacity-100;
}

.openapi-path-copy-button-icon svg {
    @apply text-tint size-4;
}