/**
 *   Extra CSS file recommended for MkDocs and neoteroi.mkdocsoad plugin.
 *   This includes rules to highlight certain parts of the output of `essentials-openapi`,
 *   and to better use the width of the page.
 *
 *   https://github.com/Neoteroi/mkdocs-plugins
**/

:root {
    --http-get-color: green;
    --http-delete-color: #dc0101;
    --http-head-color: slateblue;
    --http-options-color: steelblue;
    --http-patch-color: darkorange;
    --http-post-color: darkblue;
    --http-put-color: darkmagenta;
    --http-trace-color: darkcyan;
    --http-route-param-color: rgb(51, 128, 210);
    --oad-operation-separator-border-color: gray;
    --oad-block-border-color: #00bfa5;
    --oad-small-note-color: #666;
    --oad-indent-border-color: #444;
}

@media screen {

    /* Slate theme, i.e. dark mode */
    [data-md-color-scheme="slate"] {
        --http-get-color: #2ea82e;
        --http-post-color: #0093c0;
        --http-put-color: #c333c3;
        --oad-small-note-color: #afafaf;
    }
}

/* For large screens, make better use of the horizontal space */

@media screen and (min-width: 2000px) {
    .md-grid {
        max-width: 98%;
    }

    .md-sidebar {
        width: auto;
        min-width: 15%;
    }
}

.api-tag {
    font-weight: bold;
}

span[class^="http-"] {
    font-weight: bold;
    color: #fff;
    padding: 4px 1rem;
    border-radius: 2px;
    margin-right: .5rem;
}

.http-get {
    background-color: var(--http-get-color);
}

.http-delete {
    background-color: var(--http-delete-color);
}

.http-post {
    background-color: var(--http-post-color);
}

.http-patch {
    background-color: var(--http-patch-color);
}

.http-trace {
    background-color: var(--http-trace-color);
}

.http-put {
    background-color: var(--http-put-color);
}

.http-head {
    background-color: var(--http-head-color);
}

.http-options {
    background-color: var(--http-options-color);
}

.route-param {
    color: var(--http-route-param-color);
}

.operation-separator+h3[id^="get"] .route-param {
    color: var(--http-get-color);
}

.operation-separator+h3[id^="delete"] .route-param {
    color: var(--http-delete-color);
}


.operation-separator+h3[id^="post"] .route-param {
    color: var(--http-post-color);
}

.operation-separator+h3[id^="patch"] .route-param {
    color: var(--http-patch-color);
}

.operation-separator+h3[id^="trace"] .route-param {
    color: var(--http-trace-color);
}

.operation-separator+h3[id^="put"] .route-param {
    color: var(--http-put-color);
}

.operation-separator+h3[id^="head"] .route-param {
    color: var(--http-head-color);
}

.operation-separator+h3[id^="options"] .route-param {
    color: var(--http-options-color);
}

.api-version {
    font-size: 1.2rem;
}

.operation-separator {
    margin: 0 !important;
    border-bottom: 2px dotted var(--oad-operation-separator-border-color) !important;
    padding-top: .5rem;
}

.operation-separator+h3 {
    margin-top: 1rem;
}

.string-type {
    color: var(--md-code-hl-string-color);
}

.integer-type,
.number-type {
    color: var(--md-code-hl-number-color);
}

.boolean-type {
    color: var(--md-code-hl-keyword-color);
}

.format {
    color: var(--md-code-hl-name-color);
}

.null-type {
    color: var(--md-code-hl-keyword-color);
}

a.ref-link {
    color: var(--md-code-hl-special-color);
}

.request-block+div {
    padding-left: 1rem;
    border-left: 2px dashed var(--oad-block-border-color);
}

.small-note {
    font-size: 14px;
    color: var(--oad-small-note-color);
}

.request-body-title {
    margin-bottom: 4px;
}

.request-body-title+.tabbed-set,
.response-title+.tabbed-set,
.message-separator+.tabbed-set,
.common-response,
.response-section {
    margin-top: 2px;
    padding-left: 1rem;
    border-left: 2px dotted var(--oad-indent-border-color);
}

.info-data {
    font-size: .6rem;
}

.message-separator {
    visibility: hidden;
}

.sub-section-title {
    font-style: italic;
    font-size: 14px;
}