@import (reference) '../../styles/variables.less';

// override prism theme for dark mode
@{dark-selector} {
  .token.doctype,
  .token.punctuation,
  .token.entity,
  code[class*='language-'],
  pre[class*='language-'] {
    color: @c-text-secondary-dark;
  }

  .token.comment,
  .token.prolog,
  .token.cdata {
    color: @c-text-note-dark;
  }
}

code[class*='language-'],
pre[class*='language-'] {
  &::selection,
  & ::selection {
    background: @c-primary-light;
  }
}

.@{prefix}-source-code {
  @bg-color: tint(@c-site-bg, 50%);
  margin: 24px 0;
  position: relative;
  background-color: @c-bg-source-code;
  border-radius: 8px;
  border: 1px solid @c-border-light;
  @{dark-selector} & {
    border-color: @c-border-dark;
  }

  > pre.prism-code {
    margin: 0;
    padding: 18px 24px;
    font-size: 14px;
    line-height: 1.58;
    direction: ltr;
    background: transparent;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;

    .token.tag,
    .token.language-javascript,
    .token.boolean,
    .token.number {
      color: rgb(153, 0, 85);
    }

    .token.script.language-javascript.comment {
      color: slategray;
    }

    .token.keyword,
    .token.attr-value,
    .token.language-javascript.keyword {
      color: rgb(0, 119, 170);
    }

    .token.attr-name,
    .token.script.language-javascript.string {
      color: rgb(102, 153, 0);
    }

    .token.class-name,
    .token.function {
      color: rgb(221, 74, 104);
    }

    .token.tag.punctuation,
    .token.imports.punctuation,
    .token.punctuation {
      color: rgb(153, 153, 153);
    }

    .token.arrow.operator {
      color: rgb(154, 110, 58);
    }
    // remove shadow from coy theme
    &::before,
    &::after {
      content: none;
    }

    // highlight line
    & > .highlighted {
      position: relative;
      width: calc(100% + 24px);
      background-color: shade(@bg-color, 5%);

      .line-cell {
        position: relative;

        &::after {
          content: '';
          position: absolute;
          top: 0;
          right: -24px;
          bottom: 0;
          width: 24px;
          background-color: shade(@bg-color, 5%);
        }
      }

      &::after {
        content: '';
        position: absolute;
        top: 0;
        left: -24px;
        bottom: 0;
        width: 24px;
        background-color: shade(@bg-color, 5%);
      }
    }

    & > .wrap {
      display: table-row;

      & > .token-line-num {
        display: table-cell;
        text-align: right;
        padding-right: 1em;
        user-select: none;
        opacity: 0.5;
      }

      & > .line-cell {
        display: table-cell;
        width: 100%;
      }
    }
  }

  &-copy {
    position: absolute;
    top: 9px;
    right: 12px;
    display: inline-block;
    padding: 8px 12px;
    background-color: @c-bg-source-code;
    border: 0;
    border-radius: 2px;
    cursor: pointer;
    transition: all 0.2s;

    > svg {
      width: 16px;
      fill: darken(@c-border, 20%);
      transition: fill 0.2s;

      @{dark-selector} & {
        fill: lighten(@c-border-dark, 20%);
      }
    }

    &:hover > svg {
      fill: darken(@c-border, 30%);

      @{dark-selector} & {
        fill: lighten(@c-border-dark, 30%);
      }
    }

    &[data-copied] > svg {
      fill: @c-success;

      @{dark-selector} & {
        fill: @c-success-dark;
      }
    }
  }

  &:not(:hover) &-copy {
    opacity: 0;
    visibility: hidden;
  }

  @{dark-selector} & {
    @bg-color: shade(@c-site-bg-dark, 50%);

    background-color: @bg-color;

    &-copy {
      background-color: fadeout(@bg-color, 80%);
    }

    & > pre.prism-code > .highlighted {
      background-color: tint(@bg-color, 10%);

      &::after {
        background-color: tint(@bg-color, 10%);
      }

      .line-cell {
        &::after {
          background-color: tint(@bg-color, 10%);
        }
      }
    }
  }
}
