@use "../functions" as fun;
@use "../mixins" as mix;

%prism {
  .code-toolbar {
    --toolbar-height: #{fun.convert-px(100)};

    position: relative;
    margin-top: calc(var(--toolbar-height) + var(--spacing-sm));

    @include mix.media("screen") {
      @include mix.dimensions("2xs") {
        --toolbar-height: #{fun.convert-px(60)};
      }
    }

    .toolbar {
      display: flex;
      flex-flow: row wrap;
      justify-content: center;
      width: 100%;
      height: var(--toolbar-height);
      position: absolute;
      top: calc(var(--toolbar-height) * -1);
      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;
      margin: 0 var(--spacing-2xs);
    }

    .toolbar-item:nth-child(1) {
      flex: 0 0 100%;
      justify-content: center;
      margin: 0 auto 0 0;
      padding: 0 var(--spacing-sm);
      background: var(--color-bg-code);
      border-bottom: fun.convert-px(1) solid var(--color-border);
      color: var(--color-primary-darker);
      font-size: var(--font-size-sm);
      font-weight: 600;

      @include mix.media("screen") {
        @include mix.dimensions("2xs") {
          flex: 0 0 auto;
          justify-content: left;
          border-bottom: none;
          border-right: fun.convert-px(1) solid var(--color-border);
        }
      }
    }
  }

  .copy-to-clipboard-button,
  .prism-color-scheme-button {
    display: block;
    padding: fun.convert-px(3) 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);
    }
  }

  pre[class*="language-"] {
    --gutter-size-with-spacing: calc(var(--gutter-size) + var(--spacing-xs));

    padding: 0;
    position: relative;
    overflow: auto;
    background: var(--color-bg-secondary);
    border: fun.convert-px(1) solid var(--color-border-light);
    color: var(--color-fg);
    hyphens: none;
    tab-size: 4;
    text-align: left;
    white-space: pre;
    word-spacing: normal;
    word-break: normal;
    word-wrap: normal;

    &.command-line {
      --gutter-size: 19ch;
      padding-left: var(--gutter-size-with-spacing);
    }

    &.line-numbers {
      --gutter-size: 6ch;

      counter-reset: linenumber;
      padding-left: var(--gutter-size-with-spacing);
    }

    code {
      display: block;
      padding: var(--spacing-xs) 0;
      position: relative;
    }

    .line-numbers-rows,
    .command-line-prompt {
      display: block;
      width: var(--gutter-size);
      padding: var(--spacing-xs) 0;
      position: absolute;
      top: 0;
      left: calc(var(--gutter-size-with-spacing) * -1);
      background: var(--color-bg);
      border-right: fun.convert-px(1) solid var(--color-border);
      font-size: 100%;
      letter-spacing: -1px;
      text-align: right;
      pointer-events: none;
      user-select: none;

      > span {
        &::before {
          display: block;
          padding-right: var(--spacing-xs);
          color: var(--color-fg-light);
        }
      }
    }

    .command-line-prompt {
      > span {
        &::before {
          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);
        }

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

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

        &::before {
          content: counter(linenumber);
        }
      }
    }

    .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);
      }

      &.output {
        user-select: none;
      }
    }

    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%;
    }
  }
}