@mixin code-theme-base {

  // Code box div
  .highlight {
    overflow-x: auto;
    width: 100% !important;
    background-color: var(--code-block-background-color);
    display: flex !important;
    margin-top: 1rem; // prevent boxes from running together
    margin-bottom: 1rem;

    :target{
      margin-top: 0;
      padding-top: 0;
    }

      // Clipboard div
    .bd-clipboard{

      background-color: var(--code-block-background-color);
      display: flex !important;
      padding-right: 10px;

      .btn-clipboard{
        border: 0;
        color: $gray-500;
        background-color: inherit;
        &:hover {
          color: #fff;
        }
      }
    }


    //.highlight.chroma is applied to the entire code block div and the line number and
    // code pre elements.
    .chroma {
      width: 100%;
      font-size: .95rem !important;
      line-height: 1.45em;
      display: flex !important;
      background-color: var(--code-block-background-color);
      margin-bottom: 0;
      padding-bottom: .5rem;
      padding-top: .5rem;

      code {
        color: #f8f9fa;   // Code color if there is no defined highlighter style
        background-color: var(--code-block-background-color);

        // Line numbers
        .ln {
          background-color: var(--code-line-numbers-background-color);
          border-right: 1px solid #505a72;

           // Line number anchors
          a {
            color: var(--code-line-number-color);
            scroll-margin-top: 90px;
            &:hover{
              // text-decoration: none !important;
              color: #fff;
              font-weight: 800;
              text-decoration: none !important;
            }
        }
        }

        // code line
        .cl {
          background-color: var(--code-block-background-color);
          padding-left: 1rem;
        }
      }

    }
  }
}