/*
 * a11y theme for JavaScript, CSS, and HTML
 * Based on the okaidia theme: https://github.com/PrismJS/prism/blob/gh-pages/themes/prism-okaidia.css
 * @author ericwbailey
 */

/*
 * MARK: Setup
 */
@layer vendor-prism {
    @media (forced-colors: none), (forced-colors: active) {
        :root {
            --prism-a11y-border-radius: 0.3em;
            --prism-a11y-font-family:
                Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
            --prism-a11y-line-height: 1.5;
            --prism-a11y-code-block-margin: 0.5em 0;
            --prism-a11y-code-block-padding: 1em;
            --prism-a11y-code-inline-padding: 0.1em;
            --prism-a11y-width-border: 1px;
            --prism-a11y-width-tab: 2;
        }
    }

    @media (forced-colors: none), (forced-colors: active) {
        :root {
            --prism-a11y-color-background: hsla(0, 0%, 100%, 1);
            --prism-a11y-color-text-no-token: hsla(0, 0%, 33%, 1);
            --prism-a11y-color-text-comment: hsla(16, 100%, 25%, 1);
            --prism-a11y-color-text-blue: hsla(212, 55.2%, 43.7%, 1);
            --prism-a11y-color-text-cyan: hsla(192, 65.2%, 34.9%, 1);
            --prism-a11y-color-text-green: hsla(120, 100%, 25%, 1);
            --prism-a11y-color-text-gray: hsla(0, 0%, 41%, 1);
            --prism-a11y-color-text-purple: hsla(282, 100%, 41%, 1);
            --prism-a11y-color-text-red: hsla(2, 80%, 47%, 1);
            --prism-a11y-color-text-yellow: hsla(43, 74%, 30%, 1);
            --prism-a11y-plugin-color-border: hsla(43, 74%, 30%, 0.55);
            --prism-a11y-plugin-color-background: hsla(43, 74%, 30%, 0.1);
        }
    }

    @media (forced-colors: none), (forced-colors: active) {
        /*
     * MARK: Theme
     */
        :where(code[class*="language-"], pre[class*="language-"]) {
            color: var(--prism-a11y-color-text-no-token);
            background: var(--prism-a11y-color-background);
            font-family: var(--prism-a11y-font-family);
            text-align: start;
            white-space: pre;
            word-spacing: normal;
            word-break: normal;
            word-wrap: normal;
            line-height: var(--prism-a11y-line-height);

            -moz-tab-size: var(--prism-a11y-width-tab);
            -o-tab-size: var(--prism-a11y-width-tab);
            tab-size: var(--prism-a11y-width-tab);

            -webkit-hyphens: none;
            -moz-hyphens: none;
            -ms-hyphens: none;
            hyphens: none;
        }

        /* Code blocks */
        pre[class*="language-"] {
            padding: var(--prism-a11y-code-block-padding);
            margin: var(--prism-a11y-code-block-margin);
            overflow: auto;
            border-radius: var(--prism-a11y-border-radius);
        }

        :where(:not(pre) > code[class*="language-"], pre[class*="language-"]) {
            background: var(--prism-a11y-color-background);
        }

        /* Inline code */
        :not(pre) > code[class*="language-"] {
            padding: var(--prism-a11y-code-inline-padding);
            border-radius: var(--prism-a11y-border-radius);
            white-space: normal;
        }

        :where(.token.comment, .token.prolog, .token.doctype, .token.cdata) {
            color: var(--prism-a11y-color-text-comment);
        }

        .token.punctuation {
            color: var(--prism-a11y-color-text-gray);
        }

        :where(
            .token.property,
            .token.tag,
            .token.constant,
            .token.symbol,
            .token.deleted
        ) {
            color: var(--prism-a11y-color-text-red);
        }

        :where(
            .token.operator,
            .token.entity,
            .token.url,
            .language-css .token.string,
            .style .token.string,
            .token.variable,
            .token.keyword
        ) {
            color: var(--prism-a11y-color-text-cyan);
        }

        :where(
            .token.selector,
            .token.attr-name,
            .token.string,
            .token.char,
            .token.builtin,
            .token.inserted
        ) {
            color: var(--prism-a11y-color-text-green);
        }

        :where(
            .token.atrule,
            .token.attr-value,
            .token.function,
            .token.regex,
            .token.important
        ) {
            color: var(--prism-a11y-color-text-yellow);
        }

        :where(.token.boolean, .token.number, .token.keyword) {
            color: var(--prism-a11y-color-text-purple);
        }

        :where(.token.important, .token.bold) {
            font-weight: bold;
        }

        .token.italic {
            font-style: italic;
        }

        .token.entity {
            cursor: help;
        }

        /*
     * MARK: Plugin support
     */
        /* Line highlight */
        .line-highlight {
            background: var(--prism-a11y-plugin-color-background);
            border-top: var(--prism-a11y-width-border) solid
                var(--prism-a11y-plugin-color-border);
            border-bottom: var(--prism-a11y-width-border) solid
                var(--prism-a11y-plugin-color-border);
        }

        /* Line numbers */
        .line-numbers .line-numbers-rows {
            border-right: var(--prism-a11y-width-border) solid
                var(--prism-a11y-color-text-no-token);
        }

        .line-numbers-rows > span:before {
            color: var(--prism-a11y-color-text-comment);
        }
    }

    /*
   * MARK: Forced color mode support
   */
    @media (forced-colors: active) {
        :root {
            --prism-a11y-color-background: Canvas;
            --prism-a11y-color-text-no-token: CanvasText;
            --prism-a11y-color-text-comment: GrayText;
            --prism-a11y-color-text-cyan: LinkText;
            --prism-a11y-color-text-gray: LinkText;
            --prism-a11y-color-text-green: CanvasText;
            --prism-a11y-color-text-purple: CanvasText;
            --prism-a11y-color-text-red: CanvasText;
            --prism-a11y-color-text-yellow: GrayText;
            --prism-a11y-plugin-color-border: LinkText;
            --prism-a11y-plugin-color-background: Canvas;
        }

        :where(.token.boolean, .token.number, .token.keyword) {
            font-weight: bold;
        }
    }

    /* 
   *  MARK: Extra code for the copy to clipboard toolbar
   */
    div.code-toolbar {
        position: relative;
    }
    div.code-toolbar > .toolbar {
        position: absolute;
        z-index: 10;
        top: 0.3em;
        right: 0.2em;
        transition: opacity 0.3s ease-in-out;
        opacity: 0;
    }
    div.code-toolbar:hover > .toolbar {
        opacity: 1;
    }
    div.code-toolbar:focus-within > .toolbar {
        opacity: 1;
    }
    div.code-toolbar > .toolbar > .toolbar-item {
        display: inline-block;
    }
    div.code-toolbar > .toolbar > .toolbar-item > a {
        cursor: pointer;
    }
    div.code-toolbar > .toolbar > .toolbar-item > button {
        background: 0 0;
        border: 0;
        color: inherit;
        font: inherit;
        line-height: normal;
        overflow: visible;
        padding: 0;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
    }
    div.code-toolbar > .toolbar > .toolbar-item > a,
    div.code-toolbar > .toolbar > .toolbar-item > button,
    div.code-toolbar > .toolbar > .toolbar-item > span {
        color: #bbb;
        font-size: 0.8em;
        padding: 0 0.5em;
        background: rgba(224, 224, 224, 0.2);
        background: var(--prism-a11y-color-background);
        box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2);
        border-radius: 0.5em;
    }
    div.code-toolbar > .toolbar > .toolbar-item > a:focus,
    div.code-toolbar > .toolbar > .toolbar-item > a:hover,
    div.code-toolbar > .toolbar > .toolbar-item > button:focus,
    div.code-toolbar > .toolbar > .toolbar-item > button:hover,
    div.code-toolbar > .toolbar > .toolbar-item > span:focus,
    div.code-toolbar > .toolbar > .toolbar-item > span:hover {
        color: inherit;
        text-decoration: none;
    }
}