pre {
  border: 1px solid var(--color-black-100);
  border-radius: 8px;

  code.hljs {
    background: var(--color-black-50);
    color: #70727C;
    padding: 24px !important;
    font-size: 0.875rem;
    border-radius: 8px;
  }

  .hljs-ln-n {
    min-width: 64px;
  }
  
  .hljs-tag .hljs-comment,
  .hljs-comment {
    color: #abb2bf;
  }

  .hljs-tag {
    color: #70727C;

    .hljs-title,
    .hljs-name,
    .hljs-type {
      color: #D860A1;
    }
    .hljs-attr {
      color: #3C83C4;
    }
    .hljs-string {
      color: #4CA336;
    }
    .hljs-keyword {
      color: #c678dd;
    }
  }
  .hljs-title,
  .hljs-name,
  .hljs-type {
    color: #D860A1;
  }
  .hljs-attr {
    color: #3C83C4;
  }
  .hljs-number {
    color: #d19a66;
  }
  .hljs-string {
    color: #4CA336;
  }
  .hljs-keyword {
    color: #c678dd;
  }
  .hljs-ln-n {
    color: var(--color-black-300);
  }
}

[data-section="code"] {
  pre {
    code.hljs {
      min-height: 408px;
    }
  }
}

.dark {
  pre {
    border-color: var(--color-black-700);

    code.hljs {
      background: #38363F;
      color: var(--color-white);
    }
    
    .hljs-tag .hljs-comment,
    .hljs-comment {
      color: #abb2bf;
    }

    .hljs-tag {
      color: var(--color-white);

      .hljs-title,
      .hljs-name,
      .hljs-type {
        color: #EC99C6;
      }
      .hljs-attr {
        color: #81C1EF;
      }
      .hljs-string {
        color: #AAE3A5;
      }
    }
    .hljs-title,
    .hljs-name,
    .hljs-type {
      color: #EC99C6;
    }
    .hljs-attr {
      color: #81C1EF;
    }
    .hljs-string {
      color: #AAE3A5;
    }
    .hljs-ln-n {
      color: var(--color-black-500);
    }
  }
}