@use "@styles/abstracts/functions" as fun; .btn { display: inline-flex; place-content: center; align-items: center; border: none; border-radius: fun.convert-px(5); font-size: var(--font-size-md); font-weight: 600; text-decoration: none; transition: all 0.3s ease-in-out 0s; &--initial { border-radius: 0; } &--rectangle { padding: var(--spacing-2xs) var(--spacing-sm); } &--square, &--circle { min-width: fit-content; min-height: fit-content; padding: var(--spacing-xs); aspect-ratio: 1 / 1; } &--circle { border-radius: 50%; } &:disabled { cursor: wait; } &--neutral { background: inherit; } &--primary { background: var(--color-primary); border: fun.convert-px(2) solid var(--color-bg); box-shadow: 0 0 0 fun.convert-px(2) var(--color-primary), 0 0 0 fun.convert-px(3) var(--color-primary-darker), fun.convert-px(2) fun.convert-px(2) 0 fun.convert-px(3) var(--color-primary-dark); color: var(--color-fg-inverted); text-shadow: fun.convert-px(2) fun.convert-px(2) 0 var(--color-shadow); &:disabled { background: var(--color-primary-darker); } &:not(:disabled) { &:hover, &:focus { background: var(--color-primary-light); box-shadow: 0 0 0 fun.convert-px(2) var(--color-primary-light), 0 0 0 fun.convert-px(3) var(--color-primary-darker), fun.convert-px(7) fun.convert-px(7) 0 fun.convert-px(2) var(--color-primary-dark); color: var(--color-fg-inverted); transform: translateX(#{fun.convert-px(-4)}) translateY(#{fun.convert-px(-4)}); } &:focus { text-decoration: underline solid var(--color-fg-inverted) fun.convert-px(2); } &:active { background: var(--color-primary-dark); box-shadow: 0 0 0 fun.convert-px(2) var(--color-primary), 0 0 0 fun.convert-px(3) var(--color-primary-darker), 0 0 0 0 var(--color-primary-dark); text-decoration: none; transform: translateX(#{fun.convert-px(4)}) translateY(#{fun.convert-px(4)}); } } } &--secondary { background: var(--color-bg); border: fun.convert-px(3) solid var(--color-primary); box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1) var(--color-shadow), fun.convert-px(1) fun.convert-px(2) fun.convert-px(2) fun.convert-px(-2) var(--color-shadow), fun.convert-px(3) fun.convert-px(4) fun.convert-px(5) fun.convert-px(-4) var(--color-shadow); color: var(--color-primary); &:disabled { border-color: var(--color-border-dark); color: var(--color-fg-light); } &:not(:disabled) { &:hover, &:focus { border-color: var(--color-primary-light); color: var(--color-primary-light); box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1) var(--color-shadow-light), fun.convert-px(1) fun.convert-px(2) fun.convert-px(2) fun.convert-px(-2) var(--color-shadow-light), fun.convert-px(3) fun.convert-px(4) fun.convert-px(5) fun.convert-px(-4) var(--color-shadow-light), fun.convert-px(7) fun.convert-px(10) fun.convert-px(12) fun.convert-px(-3) var(--color-shadow-light); transform: scale(var(--scale-up, 1.1)); } &:focus { text-decoration: underline var(--color-primary-light) fun.convert-px(3); } &:active { border-color: var(--color-primary-dark); box-shadow: 0 0 0 0 var(--color-shadow); color: var(--color-primary-dark); text-decoration: none; transform: scale(var(--scale-down, 0.94)); } } } &--tertiary { background: var(--color-bg); border: fun.convert-px(3) solid var(--color-primary); box-shadow: fun.convert-px(2) fun.convert-px(2) 0 0 var(--color-bg), fun.convert-px(3) fun.convert-px(3) 0 0 var(--color-primary-dark), fun.convert-px(5) fun.convert-px(5) 0 0 var(--color-bg), fun.convert-px(6) fun.convert-px(6) 0 0 var(--color-primary-dark); color: var(--color-primary); &:disabled { color: var(--color-fg-light); border-color: var(--color-border-dark); box-shadow: fun.convert-px(2) fun.convert-px(2) 0 0 var(--color-bg), fun.convert-px(3) fun.convert-px(3) 0 0 var(--color-primary-darker), fun.convert-px(5) fun.convert-px(5) 0 0 var(--color-bg), fun.convert-px(6) fun.convert-px(6) 0 0 var(--color-primary-darker); } &:not(:disabled) { &:hover, &:focus { border-color: var(--color-primary-light); box-shadow: fun.convert-px(2) fun.convert-px(3) 0 0 var(--color-bg), fun.convert-px(4) fun.convert-px(5) 0 0 var(--color-primary), fun.convert-px(6) fun.convert-px(8) 0 0 var(--color-bg), fun.convert-px(8) fun.convert-px(10) 0 0 var(--color-primary), fun.convert-px(10) fun.convert-px(12) fun.convert-px(1) 0 var(--color-shadow-light), fun.convert-px(10) fun.convert-px(12) fun.convert-px(5) fun.convert-px(1) var(--color-shadow-light); color: var(--color-primary-light); transform: translateX(#{fun.convert-px(-3)}) translateY(#{fun.convert-px(-5)}); } &:focus { text-decoration: underline var(--color-primary) fun.convert-px(2); } &:active { box-shadow: 0 0 0 0 var(--color-shadow); text-decoration: none; transform: translateX(#{fun.convert-px(5)}) translateY(#{fun.convert-px(6)}); } } } } /* Generic.Inserted */ .highlight .go { color: #888888 } /* Generic.Output */ .highlight .gp { color: #555555 } /* Generic.Prompt */ .highlight .gs { font-weight: bold } /* Generic.Strong */ .highlight .gu { color: #666666 } /* Generic.Subheading */ .highlight .gt { color: #aa0000 } /* Generic.Traceback */ .highlight .kc { color: #008800; font-weight: bold } /* Keyword.Constant */ .highlight .kd { color: #008800; font-weight: bold } /* Keyword.Declaration */ .highlight .kn { color: #008800; font-weight: bold } /* Keyword.Namespace */ .highlight .kp { color: #008800 } /* Keyword.Pseudo */ .highlight .kr { color: #008800; font-weight: bold } /* Keyword.Reserved */ .highlight .kt { color: #888888; font-weight: bold } /* Keyword.Type */ .highlight .m { color: #0000DD; font-weight: bold } /* Literal.Number */ .highlight .s { color: #dd2200; background-color: #fff0f0 } /* Literal.String */ .highlight .na { color: #336699 } /* Name.Attribute */ .highlight .nb { color: #003388 } /* Name.Builtin */ .highlight .nc { color: #bb0066; font-weight: bold } /* Name.Class */ .highlight .no { color: #003366; font-weight: bold } /* Name.Constant */ .highlight .nd { color: #555555 } /* Name.Decorator */ .highlight .ne { color: #bb0066; font-weight: bold } /* Name.Exception */ .highlight .nf { color: #0066bb; font-weight: bold } /* Name.Function */ .highlight .nl { color: #336699; font-style: italic } /* Name.Label */ .highlight .nn { color: #bb0066; font-weight: bold } /* Name.Namespace */ .highlight .py { color: #336699; font-weight: bold } /* Name.Property */ .highlight .nt { color: #bb0066; font-weight: bold } /* Name.Tag */ .highlight .nv { color: #336699 } /* Name.Variable */ .highlight .ow { color: #008800 } /* Operator.Word */ .highlight .w { color: #bbbbbb } /* Text.Whitespace */ .highlight .mb { color: #0000DD; font-weight: bold } /* Literal.Number.Bin */ .highlight .mf { color: #0000DD; font-weight: bold } /* Literal.Number.Float */ .highlight .mh { color: #0000DD; font-weight: bold } /* Literal.Number.Hex */ .highlight .mi { color: #0000DD; font-weight: bold } /* Literal.Number.Integer */ .highlight .mo { color: #0000DD; font-weight: bold } /* Literal.Number.Oct */ .highlight .sa { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Affix */ .highlight .sb { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Backtick */ .highlight .sc { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Char */ .highlight .dl { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Delimiter */ .highlight .sd { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Doc */ .highlight .s2 { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Double */ .highlight .se { color: #0044dd; background-color: #fff0f0 } /* Literal.String.Escape */ .highlight .sh { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Heredoc */ .highlight .si { color: #3333bb; background-color: #fff0f0 } /* Literal.String.Interpol */ .highlight .sx { color: #22bb22; background-color: #f0fff0 } /* Literal.String.Other */ .highlight .sr { color: #008800; background-color: #fff0ff } /* Literal.String.Regex */ .highlight .s1 { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Single */ .highlight .ss { color: #aa6600; background-color: #fff0f0 } /* Literal.String.Symbol */ .highlight .bp { color: #003388 } /* Name.Builtin.Pseudo */ .highlight .fm { color: #0066bb; font-weight: bold } /* Name.Function.Magic */ .highlight .vc { color: #336699 } /* Name.Variable.Class */ .highlight .vg { color: #dd7700 } /* Name.Variable.Global */ .highlight .vi { color: #3333bb } /* Name.Variable.Instance */ .highlight .vm { color: #336699 } /* Name.Variable.Magic */ .highlight .il { color: #0000DD; font-weight: bold } /* Literal.Number.Integer.Long */
(Prism.languages.twig = {
  comment: /^\{#[\s\S]*?#\}$/,
  'tag-name': { pattern: /(^\{%-?\s*)\w+/, lookbehind: !0, alias: 'keyword' },
  delimiter: { pattern: /^\{[{%]-?|-?[%}]\}$/, alias: 'punctuation' },
  string: {
    pattern: /("|')(?:\\.|(?!\1)[^\\\r\n])*\1/,
    inside: { punctuation: /^['"]|['"]$/ },
  },
  keyword: /\b(?:even|if|odd)\b/,
  boolean: /\b(?:false|null|true)\b/,
  number: /\b0x[\dA-Fa-f]+|(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:[Ee][-+]?\d+)?/,
  operator: [
    {
      pattern:
        /(\s)(?:and|b-and|b-or|b-xor|ends with|in|is|matches|not|or|same as|starts with)(?=\s)/,
      lookbehind: !0,
    },
    /[=<>]=?|!=|\*\*?|\/\/?|\?:?|[-+~%|]/,
  ],
  punctuation: /[()\[\]{}:.,]/,
}),
  Prism.hooks.add('before-tokenize', function (e) {
    'twig' === e.language &&
      Prism.languages['markup-templating'].buildPlaceholders(
        e,
        'twig',
        /\{(?:#[\s\S]*?#|%[\s\S]*?%|\{[\s\S]*?\})\}/g
      );
  }),
  Prism.hooks.add('after-tokenize', function (e) {
    Prism.languages['markup-templating'].tokenizePlaceholders(e, 'twig');
  });