/**
 * GHColors theme by Avi Aryan (http://aviaryan.in)
 * Inspired by Github syntax coloring
 */

code[class*="language-"],
pre[class*="language-"] {
  font-family: "JetBrains Mono", source-code-pro, Menlo, Monaco, Consolas,
    "Courier New", monospace !important;
  font-size: 0.9em;
  hyphens: none;
  line-height: 1.2em;
  color: #303133;
  text-align: left;
  word-break: normal;
  tab-size: 4;
  white-space: pre;
  word-spacing: normal;
  direction: ltr;
}

pre > code[class*="language-"] {
  font-size: 1em;
}

pre[class*="language-"]::selection,
pre[class*="language-"] ::selection {
  background-color: var(--code-select-bg-color);
}

pre[class*="language-"]::selection,
pre[class*="language-"] ::selection,
code[class*="language-"]::selection,
code[class*="language-"] ::selection {
  background-color: var(--code-select-bg-color);
}

/* Code blocks */
pre[class*="language-"] {
  padding: 1em;
  margin: 0.5em 0;
  overflow: auto;
  background-color: white;
  border: 1px solid #ddd;
}

/* Inline code */
:not(pre) > code[class*="language-"] {
  padding: 0.2em;
  padding-top: 1px;
  padding-bottom: 1px;
  background: #f8f8f8;
  border: 1px solid #ddd;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  font-style: italic;
  color: var(--code-comment-color);
}

.token.namespace {
  opacity: 0.7;
}

.token.string,
.token.attr-value {
  color: var(--code-attr-value-color);
}

.token.punctuation,
.token.operator {
  color: var(--code-punctuation-color); /* no highlight */
}

.token.entity,
.token.url,
.token.symbol,
.token.number,
.token.boolean,
.token.variable,
.token.constant,
.token.property,
.token.regex,
.token.inserted {
  color: var(--code-entity-color);
}

.token.number {
  color: var(--code-number-color);
}

.token.atrule,
.token.keyword,
.token.attr-name,
.language-autohotkey .token.selector {
  color: var(--code-attr-name-color);
}

.token.function,
.token.deleted,
.language-autohotkey .token.tag {
  color: var(--code-tag-color);
}

.token.tag,
.token.selector,
.language-autohotkey .token.keyword {
  color: var(--code-language-autohotkey-color);
}

.token.selector {
  color: var(--code-select-color);
}

.token.keyword {
  color: var(--code-keyword-color);
}

.token.script {
  color: var(--code-script-color);
}

.token.important,
.token.function,
.token.bold {
  font-weight: bold;
}

.token.function {
  color: var(--code-function-color);
}

.token.italic {
  font-style: italic;
}

.token.property {
  color: var(--code-proerty-color);
}

.token.language-css,
.token.language-less,
.token.language-sass {
  color: var(--code-lang-color);
}

// 首页样式
.VPHome {
  .actions {
    .action {
      &:first-of-type {
        a {
          height: 48px;
          padding: 12px 24px;
          font-size: 16px;
          line-height: 24px;
          border-radius: 6px;
        }
      }

      &:last-of-type {
        a {
          height: 48px;
          padding: 12px 24px;
          font-size: 16px;
          line-height: 24px;
          // color: #1c1f23;
          color: var(--code-color);
          border: 1px solid rgb(28 31 35 / 8%);
          border-radius: 6px;

          &:hover {
            background-color: rgb(46 50 56 / 5%);
          }
        }
      }
    }
  }

  .image-bg {
    // position: relative;
    filter: blur(120px);
    opacity: 0.6;
    @size: 200px;

    &::after {
      position: absolute;
      left: 180px;
      width: @size;
      height: @size;
      content: "";
      background-color: rgb(84 209 193);
      border-radius: 50%;
    }

    &::before {
      position: absolute;
      top: 120px;
      left: -100px;
      width: @size;
      height: @size;
      content: "";
      background-color: rgb(128 144 211);
      border-radius: 50%;
    }
  }

  .VPFeature {
    margin-top: 16px;
    background-color: var(--vi-bg-color-primary);
    border: 1px solid rgb(28 31 35 / 8%);

    .icon {
      margin-bottom: 38px;
      font-size: 26px;
      background-color: transparent;
      transform: translateX(-6px);
    }

    .title {
      font-size: 19px;
      color: var(--vi-color-primary);
    }

    .details {
      margin-top: 8px;
      font-size: 17px;
      color: var(--vi-color-primary) !important;
      opacity: 0.6;
    }
  }
}
