/* Re-style these elements */
/* Increases the font size of the endpoint
dropdown heading. */
.opblock-summary-description {
    padding-left: 1rem;
    font-size: 1.2rem !important;
}

/* Updates the colour of the opblock heading to help
differentiate when it's open/closed. Also adds a
transition between the colour change. */
.swagger-ui .opblock-tag-section .opblock-tag {
    background-color: #FFFFFF;
    transition: background-color 0.2s ease-in-out !important;
}

.swagger-ui .opblock-tag-section.is-open .opblock-tag {
    background-color: #CFE2FF;
}

/* Changes the flex direction to "column" on
smaller screen sizes. */
.swagger-ui .opblock-tag {
    flex-direction: column;
    align-items: flex-start;
}

.swagger-ui .opblock-tag a {
    padding: 1rem 10px;
}

.swagger-ui .opblock-tag button {
    margin-inline: auto;
}

/* Adds a small border shadow and subtle
curve to the opblock-tag. */
.swagger-ui .opblock-tag {
    box-shadow: 0 0 3px rgba(0,0,0,.19);
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.swagger-ui .filter.wrapper {
    display: block !important;
}

/* Increases the font size of the main
Swagger UI description at the top of the page. */
.swagger-ui .info p,
.swagger-ui .info pre,
.swagger-ui .info li,
.swagger-ui .info table {
    font-size: 1rem;
}

/* Increases the padding around the main Swagger UI
description section and increases the spacing from
the sections search bar. Also puts the main Swagger
UI description in a rounded light background box. */
.swagger-ui .information-container.wrapper {
    padding-inline: 1.5rem !important;
    padding-block: 1rem !important;
    margin-bottom: 2rem;
    border-radius: var(--bs-border-radius);
    background-color: var(--bs-tertiary-bg);
}

/* Removes the bottom margin so there isn't extra
whitespace if a description is not included. */
.swagger-ui .information-container.wrapper hgroup.main {
    margin-bottom: 0;
}

/* Replaces the main hgroup's bottom margin so spacing
between the hgroup and description only exists if there
is a description. */
.swagger-ui .information-container.wrapper hgroup.main + .description {
    margin-top: 20px;
}

/* Hides the description's <div> element if there isn't
a description so there isn't extra whitespace if empty. */
.swagger-ui .information-container.wrapper hgroup.main + .description:empty {
    display: none;
}

/* Hides the description's <div> element if there isn't
a description so there isn't extra whitespace if empty. */
.swagger-ui .information-container.wrapper hgroup.main + .description:empty {
    display: none;
}

/* Removes extra whitespace at end of top information wrapper. */
.swagger-ui .information-container.wrapper .info > :last-child,
.swagger-ui .information-container.wrapper .info > .description:last-child > .renderedMarkdown > :last-child {
    margin-bottom: 0;
    padding-bottom: 0;
}

/* Normalises the font size and weight of <h1-6> elements (not
including the <h2> title element. */
.swagger-ui .information-container.wrapper .info > .description > .renderedMarkdown h1,
.swagger-ui .information-container.wrapper .info > .description > .renderedMarkdown h2,
.swagger-ui .information-container.wrapper .info > .description > .renderedMarkdown h3,
.swagger-ui .information-container.wrapper .info > .description > .renderedMarkdown h4,
.swagger-ui .information-container.wrapper .info > .description > .renderedMarkdown h5,
.swagger-ui .information-container.wrapper .info > .description > .renderedMarkdown h6 {
    padding-top: 1rem;
}

.swagger-ui .information-container.wrapper .info > .description > .renderedMarkdown h1,
.swagger-ui .information-container.wrapper .info > .description > .renderedMarkdown h2 {
    font-size: 1.5rem;
    font-weight: 600;
}

.swagger-ui .information-container.wrapper .info > .description > .renderedMarkdown h3 {
    font-size: 1.25rem;
    font-weight: 550;
}

.swagger-ui .information-container.wrapper .info > .description > .renderedMarkdown h4 {
    font-size: var(--fs-base-2);
}

.swagger-ui .information-container.wrapper .info > .description > .renderedMarkdown h5,
.swagger-ui .information-container.wrapper .info > .description > .renderedMarkdown h6 {
    font-size: 1rem;
}

/* Removes the left padding of the endpoint
sections. */
.swagger-ui .wrapper {
    padding-inline: 0;
}

/* Removes the margin between Swagger UI and the <h1>
and between the main Swagger UI description and the
sections search bar. */
.information-container.wrapper .info {
    margin-top: 0;
    margin-bottom: 0;
}

/* Removes any HTTP method theming (e.g., GET has a blue
background colour, PUT has an orange background colour). */
.swagger-ui .opblock {
    background: white !important;
    border: none !important;
}

/* Overrules the responses table display: none rule. */
.live-responses-table {
    display: block !important; 
}

/* Adds wrapping on smaller screen sizes so the
"* required" text doesn't cause the inputs to
overflow past the container padding. */
.parameter__name.required {
    display: flex;
    flex-wrap: wrap;
}

/* Sets the section filter input to take up the
full width of the screen on smaller screen sizes */
.swagger-ui .filter .operation-filter-input {
    max-width: none;
}


/* Hide these elements */
/* Hides the link to the OpenAPI specification. */
.topbar {
    display: none !important;
}

@media (min-width: 768px) {
    /* Increases the padding between the endpoints section
    description and its heading. */
    .opblock-tag p {
        padding-left: 2rem;
    }

    .swagger-ui .opblock-tag {
        flex-direction: row;
        align-items: center;
    }

    .swagger-ui .opblock-tag a {
        padding: 0 10px;
    }

    .parameter__name.required {
        display: block;
    }
}

@media (prefers-color-scheme: light) {
    /* Removes any HTTP method theming related to the bottom border
    (e.g., GET has a blue bottom border colour, PUT has an orange
    bottom border colour). */
    .swagger-ui .opblock .opblock-summary {
        border-color: #eee !important;
        border-bottom: 1px solid #eee !important;
    }
}

@media (prefers-color-scheme: dark) {
    .swagger-ui .loading-container {
        background-color: var(--bs-tertiary-bg);
    }

    .swagger-ui .operation-tag-content,
    .swagger-ui .opblock .opblock-section-header,
    .swagger-ui .opblock .opblock-body,
    .swagger-ui .opblock .opblock-summary {
        background-color: var(--bs-tertiary-bg);
    }

    .swagger-ui .opblock .opblock-summary {
        border-color: var(--bs-tertiary-color) !important;
        border-bottom: 1px solid var(--bs-tertiary-color) !important;
    }

    .swagger-ui .opblock-tag-section .opblock-tag {
        background-color: var(--bs-tertiary-bg);
    }
    
    .swagger-ui .opblock-tag-section.is-open .opblock-tag {
        background-color: var(--bs-secondary-bg);
    }
    
    .swagger-ui .filter .operation-filter-input {
        border-color: var(--bs-border-color);
    }
    
    .swagger-ui .models {
        background-color: var(--bs-body-bg);
    }
    
    .swagger-ui .models button div,
    .swagger-ui .models button span {
        background-color: var(--bs-body-bg);
        color: var(--bs-secondary-color) !important;
    }
    
    .swagger-ui .models .json-schema-2020-12__title {
        color: var(--bs-secondary-color) !important;
    }

    .swagger-ui .models svg {
        filter: invert(85%) sepia(7%) saturate(422%) hue-rotate(188deg) brightness(87%) contrast(90%);
    }
}