import styled, { css } from "styled-components";
import { addScrollbar } from "../../mixins";
import { classes, tokens } from "./CodeArea.tokens";
export const base = css([
    `display:flex;flex-direction:column;height:100%;gap:var(`,
    `);padding:var(`,
    `);border-radius:var(`,
    `);background:var(`,
    `);color:var(`,
    `);`
], tokens.wrapperGap, tokens.wrapperPadding, tokens.wrapperBorderRadius, tokens.wrapperBackgroundColor, tokens.codeColor);
export const syntaxTheme = {
    'code[class*="language-"]': {
        color: `var(${tokens.codeColor})`,
        fontFamily: `var(${tokens.fontFamily})`,
        fontSize: `var(${tokens.fontSize})`,
        fontStyle: `var(${tokens.fontStyle})`,
        fontWeight: `var(${tokens.fontWeight})`,
        letterSpacing: `var(${tokens.letterSpacing})`,
        lineHeight: `var(${tokens.lineHeight})`,
        textShadow: 'none',
        whiteSpace: 'pre-wrap',
        wordBreak: 'break-word'
    },
    'pre[class*="language-"]': {
        color: `var(${tokens.codeColor})`,
        fontFamily: `var(${tokens.fontFamily})`,
        fontSize: `var(${tokens.fontSize})`,
        fontStyle: `var(${tokens.fontStyle})`,
        fontWeight: `var(${tokens.fontWeight})`,
        letterSpacing: `var(${tokens.letterSpacing})`,
        lineHeight: `var(${tokens.lineHeight})`,
        textShadow: 'none',
        background: 'transparent',
        margin: 0,
        padding: 0,
        overflow: 'visible'
    },
    punctuation: {
        color: `var(${tokens.lineNumberColor})`
    },
    operator: {
        color: `var(${tokens.syntaxOrange})`,
        background: 'transparent'
    },
    atrule: {
        color: `var(${tokens.syntaxSkyBlue})`
    },
    keyword: {
        color: `var(${tokens.syntaxSkyBlue})`
    },
    boolean: {
        color: `var(${tokens.syntaxRed})`
    },
    number: {
        color: `var(${tokens.syntaxOrange})`
    },
    constant: {
        color: `var(${tokens.syntaxRed})`
    },
    string: {
        color: `var(${tokens.syntaxSpring})`
    },
    char: {
        color: `var(${tokens.syntaxSpring})`
    },
    property: {
        color: `var(${tokens.syntaxPink})`
    },
    tag: {
        color: `var(${tokens.syntaxRed})`
    },
    symbol: {
        color: `var(${tokens.syntaxRed})`
    },
    deleted: {
        color: `var(${tokens.syntaxRed})`
    },
    selector: {
        color: `var(${tokens.syntaxYellow})`
    },
    function: {
        color: `var(${tokens.syntaxYellow})`
    },
    inserted: {
        color: `var(${tokens.syntaxSpring})`
    },
    comment: {
        color: `var(${tokens.lineNumberColor})`
    },
    'class-name': {
        color: `var(${tokens.syntaxRed})`
    },
    builtin: {
        color: `var(${tokens.syntaxRed})`
    },
    variable: {
        color: `var(${tokens.syntaxPink})`
    }
};
export const Field = styled.div.withConfig({
    displayName: "CodeArea.styles__Field",
    componentId: "sc-bac2b71a-0"
})([
    `display:flex;flex:1 1 auto;flex-direction:column;min-width:0;min-height:0;border-radius:var(`,
    `);background:var(`,
    `);`
], tokens.overlayBorderRadius, tokens.fieldBackgroundColor);
export const Overlay = styled.div.withConfig({
    displayName: "CodeArea.styles__Overlay",
    componentId: "sc-bac2b71a-1"
})([
    `display:flex;flex:1 1 auto;flex-direction:column;min-width:0;min-height:0;padding:var(`,
    `);`
], tokens.overlayPadding);
export const Outer = styled.div.withConfig({
    displayName: "CodeArea.styles__Outer",
    componentId: "sc-bac2b71a-2"
})([
    `flex-shrink:0;`
]);
export const Header = styled.div.withConfig({
    displayName: "CodeArea.styles__Header",
    componentId: "sc-bac2b71a-3"
})([
    `flex-shrink:0;margin-bottom:var(`,
    `);&.`,
    `{border-bottom:0.0625rem solid var(`,
    `);}`
], tokens.headerMarginBottom, classes.contentHeaderDivider, tokens.dividerColor);
export const Action = styled.div.withConfig({
    displayName: "CodeArea.styles__Action",
    componentId: "sc-bac2b71a-4"
})([
    `position:absolute;top:0;right:0;`
]);
export const Content = styled.div.withConfig({
    displayName: "CodeArea.styles__Content",
    componentId: "sc-bac2b71a-5"
})([
    `position:relative;display:flex;flex:1 1 auto;gap:var(`,
    `);align-items:stretch;width:100%;min-width:0;min-height:0;box-sizing:border-box;`
], tokens.contentGap);
export const Code = styled.div.withConfig({
    displayName: "CodeArea.styles__Code",
    componentId: "sc-bac2b71a-6"
})([
    `flex:1 1 auto;min-width:0;min-height:0;box-sizing:border-box;overflow:auto;padding:0.0625rem 0;margin-right:var(`,
    `);padding-right:var(`,
    `);pre,code{tab-size:4;}.linenumber{display:flex !important;align-self:stretch;align-items:flex-start;justify-content:flex-end;min-width:var(`,
    `,1ch) !important;padding-right:var(`,
    `) !important;box-sizing:content-box;color:var(`,
    `) !important;border-right:0.0625rem solid var(`,
    `);text-align:right !important;user-select:none;}.`,
    `{display:grid !important;grid-template-columns:max-content minmax(0,1fr);column-gap:var(`,
    `,0.5rem);align-items:stretch;}.`,
    `{grid-template-columns:minmax(0,1fr);}.`,
    `{display:block;min-width:0;white-space:pre-wrap;overflow-wrap:anywhere;}`,
    ``
], tokens.codeMarginRight, tokens.codePaddingRight, tokens.lineNumberMinWidth, tokens.numerationPaddingRight, tokens.lineNumberColor, tokens.dividerColor, classes.line, tokens.lineNumberGap, classes.lineWithoutNumber, classes.lineContent, addScrollbar({
    scrollWidth: `var(${tokens.scrollWidth})`,
    trackColor: `var(${tokens.scrollTrackColor})`,
    thumbColor: `var(${tokens.scrollThumbColor})`
}));
