@yuntijs/ui/es/Highlighter/style.js

☁️ Yunti UI - an open-source UI component library for building Cloud Native web apps

import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
import { createStyles } from 'antd-style';
export var useStyles = createStyles(function (_ref, _ref2) {
  var token = _ref.token,
    css = _ref.css,
    cx = _ref.cx,
    prefixCls = _ref.prefixCls,
    stylish = _ref.stylish;
  var variant = _ref2.variant,
    expand = _ref2.expand;
  var prefix = "".concat(prefixCls, "-highlighter");
  var buttonHoverCls = "".concat(prefix, "-hover-btn");
  var langHoverCls = "".concat(prefix, "-hover-lang");
  var variantStylish = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      background-color: ", ";\n      border: 1px solid ", ";\n\n      &:hover {\n        background-color: ", ";\n      }\n    "])), variant === 'filled' ? token.colorFillTertiary : 'transparent', variant === 'filled' ? 'transparent' : token.colorBorder, variant === 'filled' ? token.colorFillTertiary : token.colorFillQuaternary);
  return {
    button: cx(buttonHoverCls, css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n          position: absolute;\n          z-index: 2;\n          inset-block-start: ", ";\n          inset-inline-end: ", ";\n\n          opacity: 0;\n        "])), variant === 'borderless' ? 0 : '12px', variant === 'borderless' ? 0 : '12px')),
    container: cx(prefix, variant !== 'borderless' && variantStylish, css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n          position: relative;\n\n          overflow: hidden;\n\n          height: ", ";\n\n          border-radius: ", "px;\n\n          transition: background-color 100ms ", ";\n\n          &:hover {\n            .", " {\n              opacity: 1;\n            }\n\n            .", " {\n              opacity: 1;\n            }\n          }\n\n          .prism-code {\n            background: none !important;\n          }\n\n          pre {\n            height: 100%;\n            margin: 0 !important;\n            padding: ", " !important;\n          }\n        "])), expand ? '100%' : 'auto !important', token.borderRadius, token.motionEaseOut, buttonHoverCls, langHoverCls, variant === 'borderless' ? 0 : "16px")),
    header: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        padding-block: 4px;\n        padding-inline: 8px;\n        background: ", ";\n      "])), token.colorFillQuaternary),
    lang: cx(langHoverCls, stylish.blur, css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n          position: absolute;\n          z-index: 2;\n          inset-block-end: 12px;\n          inset-inline-end: 4px;\n\n          font-family: ", ";\n          color: ", ";\n\n          opacity: 0;\n\n          transition: opacity 0.1s;\n        "])), token.fontFamilyCode, token.colorTextSecondary)),
    wrap: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n        pre {\n          white-space: break-spaces;\n        }\n      "]))),
    scroller: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n        overflow: auto;\n        width: 100%;\n        height: 100%;\n      "]))),
    select: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n        user-select: none;\n        font-size: 14px;\n        color: ", ";\n        .", "-select-selection-item {\n          min-width: 100px;\n          padding-inline-end: 0 !important;\n          color: ", ";\n          text-align: center;\n        }\n      "])), token.colorTextDescription, prefixCls, token.colorTextDescription)
  };
});