@use '../core/styles/common/tokens' as *;

@function kbq-code-block-hljs-attr($attr) {
    @return var(--kbq-code-block-hljs-#{$attr});
}

@mixin kbq-code-block-style($style-name) {
    $base: code-block-#{$style-name};

    background: var(--kbq-#{$base}-container-background);
    border-color: var(--kbq-#{$base}-container-border-color);

    & .kbq-code-block__header {
        background: var(--kbq-#{$base}-header-background);
    }

    &.kbq-code-block_header-with-shadow {
        & .kbq-code-block__header {
            box-shadow: var(--kbq-#{$base}-header-scroll-shadow);
        }
    }

    &.kbq-code-block_hide-tabs {
        .kbq-code-block__actionbar {
            .kbq-code-block__actionbar__button-stack {
                border-color: var(--kbq-#{$base}-actionbar-border-color);
                background: var(--kbq-#{$base}-actionbar-background);
            }
        }
    }

    .kbq-code-block__view-all {
        .kbq-code-block__view-all__wrapper {
            background: var(--kbq-#{$base}-collapse-button-expand-background);
            opacity: 90%;
        }

        &.kbq-code-block__view-all_expanded {
            background: var(--kbq-#{$base}-collapse-expanded-background);
        }

        &.kbq-code-block__view-all_collapsed {
            background: var(--kbq-#{$base}-collapse-collapsed-background);
        }
    }
}

@mixin kbq-code-block-theme() {
    .kbq-code-block {
        &.kbq-code-block_no-border {
            border-color: transparent !important;
        }

        .hljs-addition {
            background-color: kbq-code-block-hljs-attr(addition-background);
            color: kbq-code-block-hljs-attr(addition-color);
        }

        .hljs-attr {
            background-color: kbq-code-block-hljs-attr(attr-background);
            color: kbq-code-block-hljs-attr(attr-color);
        }

        .hljs-attribute {
            background-color: kbq-code-block-hljs-attr(attribute-background);
            color: kbq-code-block-hljs-attr(attribute-color);
        }

        .hljs-built_in {
            background-color: kbq-code-block-hljs-attr(built-in-background);
            color: kbq-code-block-hljs-attr(built-in-color);
        }

        .hljs-bullet {
            background-color: kbq-code-block-hljs-attr(bullet-background);
            color: kbq-code-block-hljs-attr(bullet-color);
        }

        .hljs-char-escape {
            background-color: kbq-code-block-hljs-attr(char-escape-background);
            color: kbq-code-block-hljs-attr(char-escape-color);
        }

        .hljs-class {
            background-color: kbq-code-block-hljs-attr(class-background);
            color: kbq-code-block-hljs-attr(class-color);
        }

        .hljs-code {
            background-color: kbq-code-block-hljs-attr(code-background);
            color: kbq-code-block-hljs-attr(code-color);
        }

        .hljs-comment {
            background-color: kbq-code-block-hljs-attr(comment-background);
            color: kbq-code-block-hljs-attr(comment-color);
        }

        .hljs-deletion {
            background-color: kbq-code-block-hljs-attr(deletion-background);
            color: kbq-code-block-hljs-attr(deletion-color);
        }

        .hljs-doctag {
            background-color: kbq-code-block-hljs-attr(doctag-background);
            color: kbq-code-block-hljs-attr(doctag-color);
        }

        .hljs-emphasis {
            background-color: kbq-code-block-hljs-attr(emphasis-background);
            color: kbq-code-block-hljs-attr(emphasis-color);
        }

        .hljs-formula {
            background-color: kbq-code-block-hljs-attr(formula-background);
            color: kbq-code-block-hljs-attr(formula-color);
        }

        .hljs-function {
            background-color: kbq-code-block-hljs-attr(function-background);
            color: kbq-code-block-hljs-attr(function-color);
        }

        .hljs-keyword {
            background-color: kbq-code-block-hljs-attr(keyword-background);
            color: kbq-code-block-hljs-attr(keyword-color);
        }

        .hljs-link {
            background-color: kbq-code-block-hljs-attr(link-background);
            color: kbq-code-block-hljs-attr(link-color);
        }

        .hljs-literal {
            background-color: kbq-code-block-hljs-attr(literal-background);
            color: kbq-code-block-hljs-attr(literal-color);
        }

        .hljs-meta {
            background-color: kbq-code-block-hljs-attr(meta-background);
            color: kbq-code-block-hljs-attr(meta-color);
        }

        .hljs-meta-keyword {
            background-color: kbq-code-block-hljs-attr(meta-keyword-background);
            color: kbq-code-block-hljs-attr(meta-keyword-color);
        }

        .hljs-meta-string {
            background-color: kbq-code-block-hljs-attr(meta-string-background);
            color: kbq-code-block-hljs-attr(meta-string-color);
        }

        .hljs-meta-prompt {
            background-color: kbq-code-block-hljs-attr(meta-prompt-background);
            color: kbq-code-block-hljs-attr(meta-prompt-color);
        }

        .hljs-name {
            background-color: kbq-code-block-hljs-attr(name-background);
            color: kbq-code-block-hljs-attr(name-color);
        }

        .hljs-number {
            background-color: kbq-code-block-hljs-attr(number-background);
            color: kbq-code-block-hljs-attr(number-color);
        }

        .hljs-operator {
            background-color: kbq-code-block-hljs-attr(operator-background);
            color: kbq-code-block-hljs-attr(operator-color);
        }

        .hljs-params {
            background-color: kbq-code-block-hljs-attr(params-background);
            color: kbq-code-block-hljs-attr(params-color);
        }

        .hljs-property {
            background-color: kbq-code-block-hljs-attr(property-background);
            color: kbq-code-block-hljs-attr(property-color);
        }

        .hljs-punctuation {
            background-color: kbq-code-block-hljs-attr(punctuation-background);
            color: kbq-code-block-hljs-attr(punctuation-color);
        }

        .hljs-quote {
            background-color: kbq-code-block-hljs-attr(quote-background);
            color: kbq-code-block-hljs-attr(quote-color);
        }

        .hljs-regexp {
            background-color: kbq-code-block-hljs-attr(regexp-background);
            color: kbq-code-block-hljs-attr(regexp-color);
        }

        .hljs-section {
            background-color: kbq-code-block-hljs-attr(section-background);
            color: kbq-code-block-hljs-attr(section-color);
        }

        .hljs-selector-attr {
            background-color: kbq-code-block-hljs-attr(selector-attr-background);
            color: kbq-code-block-hljs-attr(selector-attr-color);
        }

        .hljs-selector-class {
            background-color: kbq-code-block-hljs-attr(selector-class-background);
            color: kbq-code-block-hljs-attr(selector-class-color);
        }

        .hljs-selector-id {
            background-color: kbq-code-block-hljs-attr(selector-id-background);
            color: kbq-code-block-hljs-attr(selector-id-color);
        }

        .hljs-selector-pseudo {
            background-color: kbq-code-block-hljs-attr(selector-pseudo-background);
            color: kbq-code-block-hljs-attr(selector-pseudo-color);
        }

        .hljs-selector-tag {
            background-color: kbq-code-block-hljs-attr(selector-tag-background);
            color: kbq-code-block-hljs-attr(selector-tag-color);
        }

        .hljs-string {
            background-color: kbq-code-block-hljs-attr(string-background);
            color: kbq-code-block-hljs-attr(string-color);
        }

        .hljs-strong {
            background-color: kbq-code-block-hljs-attr(strong-background);
            color: kbq-code-block-hljs-attr(strong-color);
        }

        .hljs-subst {
            background-color: kbq-code-block-hljs-attr(subst-background);
            color: kbq-code-block-hljs-attr(subst-color);
        }

        .hljs-symbol {
            background-color: kbq-code-block-hljs-attr(symbol-background);
            color: kbq-code-block-hljs-attr(symbol-color);
        }

        .hljs-tag {
            background-color: kbq-code-block-hljs-attr(tag-background);
            color: kbq-code-block-hljs-attr(tag-color);
        }

        .hljs-template-tag {
            background-color: kbq-code-block-hljs-attr(template-tag-background);
            color: kbq-code-block-hljs-attr(template-tag-color);
        }

        .hljs-template-variable {
            background-color: kbq-code-block-hljs-attr(template-variable-background);
            color: kbq-code-block-hljs-attr(template-variable-color);
        }

        .hljs-title {
            background-color: kbq-code-block-hljs-attr(title-background);
            color: kbq-code-block-hljs-attr(title-color);
        }

        .hljs-title-class {
            background-color: kbq-code-block-hljs-attr(title-class-background);
            color: kbq-code-block-hljs-attr(title-class-color);
        }

        .hljs-title-class-inherited {
            background-color: kbq-code-block-hljs-attr(title-class-inherited-background);
            color: kbq-code-block-hljs-attr(title-class-inherited-color);
        }

        .hljs-title-function {
            background-color: kbq-code-block-hljs-attr(title-function-background);
            color: kbq-code-block-hljs-attr(title-function-color);
        }

        .hljs-title-function-invoke {
            background-color: kbq-code-block-hljs-attr(title-function-invoke-background);
            color: kbq-code-block-hljs-attr(title-function-invoke-color);
        }

        .hljs-type {
            background-color: kbq-code-block-hljs-attr(type-background);
            color: kbq-code-block-hljs-attr(type-color);
        }

        .hljs-variable {
            background-color: kbq-code-block-hljs-attr(variable-background);
            color: kbq-code-block-hljs-attr(variable-color);
        }

        .hljs-variable-constant {
            background-color: kbq-code-block-hljs-attr(variable-constant-background);
            color: kbq-code-block-hljs-attr(variable-constant-color);
        }

        .hljs-variable-language {
            background-color: kbq-code-block-hljs-attr(variable-language-background);
            color: kbq-code-block-hljs-attr(variable-language-color);
        }

        .hljs-ln-n {
            color: kbq-code-block-hljs-attr(line-numbers-color);
        }

        &.kbq-code-block_outline {
            @include kbq-code-block-style(outline);
        }

        &.kbq-code-block_filled {
            @include kbq-code-block-style(filled);
        }

        .kbq-code-block__main.cdk-keyboard-focused {
            outline-color: var(--kbq-states-line-focus-theme);
        }
    }
}

@mixin kbq-code-block-typography() {
    .kbq-code-block {
        @include kbq-typography-level-to-styles-css-variables(typography, mono-codeblock);

        .kbq-code-block__pre,
        .kbq-code-block__code {
            font: inherit;
        }
    }
}