// based loosely upon: https://github.com/Azure/bicep/blob/main/src/textmate/bicep.tmlanguage
Prism.languages.bicep = {
  comment: [
    {
      // multiline comments eg /* ASDF */
      pattern: /(^|[^\\])\/\*[\s\S]*?(?:\*\/|$)/,
      lookbehind: true,
      greedy: true,
    },
    {
      // singleline comments eg // ASDF
      pattern: /(^|[^\\:])\/\/.*/,
pre { line-height: 125%; }
td.linenos .normal { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
span.linenos { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
td.linenos .special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
span.linenos.special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
.highlight .hll { background-color: #ffffcc }
.highlight .c { color: #888888 } /* Comment */
.highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */
.highlight .k { color: #008800; font-weight: bold } /* Keyword */
.highlight .ch { color: #888888 } /* Comment.Hashbang */
.highlight .cm { color: #888888 } /* Comment.Multiline */
.highlight .cp { color: #cc0000; font-weight: bold } /* Comment.Preproc */
.highlight .cpf { color: #888888 } /* Comment.PreprocFile */
.highlight .c1 { color: #888888 } /* Comment.Single */
.highlight .cs { color: #cc0000; font-weight: bold; background-color: #fff0f0 } /* Comment.Special */
.highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
.highlight .ge { font-style: italic } /* Generic.Emph */
.highlight .gr { color: #aa0000 } /* Generic.Error */
.highlight .gh { color: #333333 } /* Generic.Heading */
.highlight .gi { color: #000000; background-color: #ddffdd } /* 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 */
@use "@styles/abstracts/functions" as fun;
@use "@styles/abstracts/mixins" as mix;

/// Custom theme for Prism

.code-toolbar {
  --gutter-size: clamp(#{fun.convert-px(75)}, 20vw, #{fun.convert-px(90)});
  --toolbar-height: #{fun.convert-px(40)};

  position: relative;

  .toolbar {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    height: var(--toolbar-height);
    padding-right: var(--spacing-2xs);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: var(--color-bg-tertiary);
    border: fun.convert-px(1) solid var(--color-border);
  }

  .toolbar-item {
    display: flex;
    align-items: center;
  }

  .toolbar-item:nth-child(1) {
    order: 2;
  }

  .toolbar-item:nth-child(2) {
    order: 1;
    margin-right: auto;
    padding: 0 var(--spacing-xs);
    background: var(--color-bg-code);
    border-right: fun.convert-px(1) solid var(--color-border);
    color: var(--color-primary-darker);
    font-size: var(--font-size-sm);
    font-weight: 600;
    min-width: var(--gutter-size);

    @include mix.media("screen") {
      @include mix.dimensions("sm") {
        min-width: unset;
      }
    }
  }
}

pre[class*="language-"] {
  max-height: max(30vw, fun.convert-px(300));
  margin: var(--spacing-md) 0;
  padding: 0;
  position: relative;
  border: fun.convert-px(1) solid var(--color-border);

  > code {
    display: block;
    padding: calc(var(--toolbar-height) + var(--spacing-xs)) 0 var(--spacing-xs)
      calc(var(--gutter-size) + var(--spacing-xs));
  }

  .line-numbers-rows,
  .command-line-prompt {
    width: var(--gutter-size);
    min-height: calc(100% - var(--toolbar-height));
    padding: var(--spacing-xs) var(--spacing-2xs);
    position: absolute;
    top: var(--toolbar-height);
    left: 0;
    pointer-events: none;
    user-select: none;
    background: var(--color-bg);
    border-right: fun.convert-px(1) solid var(--color-border);
  }

  .token {
    &.comment,
    &.doc-comment {
      color: var(--color-fg-light);
    }

    &.punctuation {
      color: var(--color-fg);
    }

    &.attr-name,
    &.hexcode,
    &.inserted,
    &.string {
      color: var(--color-token-green);
    }

    &.class,
    &.coord,
    &.id,
    &.function {
      color: var(--color-token-purple);
    }

    &.builtin,
    &.builtin.class-name,
    &.property-access,
    &.regex,
    &.scope {
      color: var(--color-token-magenta);
    }

    &.class-name,
    &.constant,
    &.global,
    &.interpolation,
    &.key,
    &.package,
    &.this,
    &.title,
    &.variable {
      color: var(--color-token-blue);
    }

    &.combinator,
    &.keyword,
    &.operator,
    &.pseudo-class,
    &.pseudo-element,
    &.rule,
    &.selector,
    &.unit {
      color: var(--color-token-orange);
    }

    &.attr-value,
    &.boolean,
    &.number {
      color: var(--color-token-yellow);
    }

    &.delimiter,
    &.doctype,
    &.parameter,
    &.parent,
    &.property,
    &.shebang,
    &.tag {
      color: var(--color-token-cyan);
    }

    &.deleted {
      color: var(--color-token-red);
    }

    &.punctuation.brace-hover,
    &.punctuation.brace-selected {
      background: var(--color-bg);
      outline: solid fun.convert-px(1) var(--color-primary-light);
    }
  }

  span.inline-color-wrapper {
    background: url(fun.encode-svg(
      '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="gray" d="M0 0h2v2H0z"/><path fill="white" d="M0 0h1v1H0zM1 1h1v1H1z"/></svg>'
    ));

    /* Prevent glitches where 1px from the repeating pattern could be seen. */
    background-position: center;
    background-size: 110%;

    display: inline-block;
    height: 1.1ch;
    width: 1.1ch;
    margin: 0 0.5ch 0 0;
    border: fun.convert-px(1) solid var(--color-bg);
    outline: fun.convert-px(1) solid var(--color-border-dark);
    overflow: hidden;
  }

  span.inline-color {
    display: block;

    /* To prevent visual glitches again */
    height: 120%;
    width: 120%;
  }
}

pre.line-numbers {
  counter-reset: lineNumber;

  .line-numbers-rows {
    > span {
      counter-increment: lineNumber;

      &::before {
        display: block;
        padding: 0 var(--spacing-xs);
        content: counter(lineNumber);
        color: var(--color-primary-darker);
        text-align: right;
        line-height: var(--line-height);
      }
    }
  }
}

pre.command-line {
  --gutter-size: clamp(#{fun.convert-px(195)}, 48vw, #{fun.convert-px(235)});

  ~ .toolbar {
    --gutter-size: clamp(#{fun.convert-px(195)}, 48vw, #{fun.convert-px(235)});
  }

  .command-line-prompt {
    > span {
      &::before {
        display: block;
        content: "";
      }

      &[data-user]::before {
        content: "[" attr(data-user) "@" attr(data-host) "] $";
      }

      &[data-user="root"]::before {
        content: "[" attr(data-user) "@" attr(data-host) "] #";
      }

      &[data-prompt]::before {
        content: attr(data-prompt);
      }
    }
  }
}

.copy-to-clipboard-button {
  display: block;
  padding: 0 var(--spacing-xs);
  background: var(--color-bg);
  border: 0.4ex solid var(--color-primary);
  border-radius: fun.convert-px(30);
  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);
  font-size: var(--font-size-sm);
  font-weight: 600;
  transition: all 0.35s ease-in-out 0s;

  &:hover,
  &:focus {
    transform: translateX(#{fun.convert-px(-2)})
      translateY(#{fun.convert-px(-2)});
    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(4) fun.convert-px(7) fun.convert-px(8) fun.convert-px(-3)
        var(--color-shadow-light);
  }

  &:focus {
    text-decoration: underline var(--color-primary) fun.convert-px(3);
  }

  &:active {
    text-decoration: none;
    transform: translateY(#{fun.convert-px(2)});
    box-shadow: 0 0 0 0 var(--color-shadow);
  }
}