.openapi-content-container {
    position: relative;

    .sl-text-base {
        font-size: 1rem;
    }

    button,
    [role="button"],
    [role=button]:is(:hover, :active, :focus) {
        --pico-primary-background: transparent;
        --pico-primary-hover-background: transparent;
        --pico-border-color: --pico-color;
        --pico-box-shadow: none;
        color: var(--pico-primary);
        border: 1px solid transparent;
    }

    li:not(.dropdown li) {
        padding-left: 0 !important;
        margin-left: 3rem;
    }

    li:before {
        display: none;
    }

    /* "Deprecated" badge */
    .sl-badge * {
        color: white !important;
        display: flex;
        align-items: center;
    }

    /* Response code badge */
    .sl-text-on-primary {
        color: white !important;
    }

    .sl-menu [role="group"] {
        display: initial;
    }

    /* Rounded corners */
    .sl-rounded {
        border-radius: var(--pico-border-radius);
    }

    /* Dropdowns' and code blocks' titlebars */
    .sl-panel__titlebar {
        padding: 0.8rem;
        border-radius: 0;
        color: inherit;

        button,
        [role="button"],
        [role=button]:is(:hover, :active, :focus) {
            margin-bottom: 0;
            color: inherit;
        }

        &[role="button"],
        &[role=button]:is(:hover, :active, :focus) {
            color: inherit;
        }

    }

    .TryItPanel {
        * {
            color: inherit;
        }

        input,
        textarea,
        label {
            margin: initial;
        }

        input {
            margin-left: 0.5rem;
        }

        [role="button"],
        [role=button]:is(:hover, :active, :focus) {
            color: inherit;
        }

        label[role="button"] {
            border: 1px solid var(--pico-form-element-border-color);
            padding: 0.25rem 0.5rem;
        }


        .sl-flex:has(.sl-input.Checkbox) {
            gap: 1rem;
            align-items: center;
        }

        [type="checkbox"] {
            border-color: var(--pico-form-element-border-color);
            width: 1.5rem;
        }

        /* Content of the "Try It" panel's dropdowns */
        .sl-elements .OperationParametersContent {
            max-height: none;
        }

    }

    /* Whole Article Wrapper */
    .HttpOperation {
        @media (max-width: 1280px) {
            max-width: 100vw;

            >.sl-flex {
                flex-direction: column;
                margin-right: 1rem;
                margin-left: 1rem;
                gap: 1rem;

                >div {
                    width: 100%;
                    max-width: 100% !important;
                    margin-right: 0;
                    margin-left: 0;
                    max-width: 100%;
                }
            }
        }

        @media (min-width: 768px) {
            >.sl-flex {
                margin-right: 0;
                margin-left: 0;
            }
        }
    }

    /* Code wrapper */
    .sl-panel__content-wrapper {
        * {
            color: inherit;
        }

        [role="button"],
        [role=button]:is(:hover, :active, :focus) {
            color: inherit;
        }

        pre,
        code {
            background-color: inherit;
        }
    }

    /* Code token */
    .token {
        [data-theme=dark] & {
            filter: brightness(3);
        }

        @media (prefers-color-scheme: light) {
            filter: brightness(1);
        }
    }

    @media (prefers-color-scheme: dark) {
        :not([data-theme=dark]) {

            .HttpOperation>.sl-flex>div:first-child {

                *:not(code, .sl-bg-canvas-tint, [role="heading"]) {
                    color: var(--pico-primary);
                }

                .sl-panel__titlebar * {
                    color: var(--pico-primary);
                }

                .sl-bg-canvas-tint {
                    background-color: var(--color-canvas-100);
                }
            }
        }
    }

}

.toc-item-open-api {
    --light-theme-color-primary: #19abff;
    --light-theme-color-success: #05b870;
    --light-theme-color-warning: #f46d2a;
    --light-theme-color-danger: #f05151;
    --light-theme-color-warning-light: #f7925f;
    --dark-theme-color-primary: #126fa5;
    --dark-theme-color-success: #145239;
    --dark-theme-color-warning: #9e461a;
    --dark-theme-color-danger: #af2323;
    --dark-theme-color-warning-light: #c1551f;

    --color-primary: var(--light-theme-color-primary);
    --color-success: var(--light-theme-color-success);
    --color-warning: var(--light-theme-color-warning);
    --color-danger: var(--light-theme-color-danger);
    --color-warning-light: var(--light-theme-color-warning-light);

    padding: 4px 10px;
    border-radius: var(--pico-border-radius);
    background-color: var(--color-primary);
    color: white;
    text-transform: uppercase;
    font-weight: 500;
    font-size: 14px;
    font-family: "SF Mono",
        ui-monospace,
        monospace;
    height: fit-content;

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

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

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

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

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

    &.http-method-head {
        background-color: var(--color-warning-dark);
    }

    &.http-method-options {
        background-color: var(--color-warning-dark);
    }

    @media (prefers-color-scheme: dark) {
        --color-primary: var(--dark-theme-color-primary);
        --color-success: var(--dark-theme-color-success);
        --color-warning: var(--dark-theme-color-warning);
        --color-danger: var(--dark-theme-color-danger);
        --color-warning-light: var(--dark-theme-color-warning-light);
    }

    [data-theme=dark] & {
        --color-primary: var(--dark-theme-color-primary);
        --color-success: var(--dark-theme-color-success);
        --color-warning: var(--dark-theme-color-warning);
        --color-danger: var(--dark-theme-color-danger);
        --color-warning-light: var(--dark-theme-color-warning-light);
    }

    [data-theme=light] & {
        --color-primary: var(--light-theme-color-primary);
        --color-success: var(--light-theme-color-success);
        --color-warning: var(--light-theme-color-warning);
        --color-danger: var(--light-theme-color-danger);
        --color-warning-light: var(--light-theme-color-warning-light);
    }

}