@import "variables.scss";

.highlight-label {
    padding: 0.25rem 0.5rem 0.25rem 0.5rem;
    border: $code-border;
    border-bottom: none;

    a {
        font-family: $font-code;
    }
}

.highlight-group pre {
    margin: 0;
}

code {
  font-family: $font-code;
  @include var(background-color, code-color);
  border: $code-border;
  padding: 0 0.25rem 0 0.25rem;
}

pre code {
    display: block;
    box-sizing: border-box;
    padding: 0.5rem;
    overflow: auto;
}

.chroma {
    .lntable {
        border-spacing: 0;
        padding: 0.5rem 0 0.5rem 0;
        @include var(background-color, code-color);
        border-radius: 0;
        border: $code-border;
        display: block;
        overflow: auto;
        margin-bottom: 1rem;

        a {
          color: inherit;
          border: none;

          &:hover, &:focus {
            background-color: rgba($primary-color, 0.25);
          }
        }

        td {
            padding: 0;
        }

        code {
            border: none;
            padding: 0;
        }

        pre {
            margin: 0;
        }

        .lntd:last-child {
            width: 100%;
        }

        // Insert padding to match the distance of the line number to its
        // border.
        .line {
            padding-left: $code-lineno-spacing;
        }
    }

    .lntr {
        display: table-row;
    }

    .lnt {
        display: block;
        padding: 0 $code-lineno-spacing 0 $code-lineno-spacing;
        @include var(color, code-lineno-color);
        border-right: $standard-border;

        // Even though only highlighted line table numbers get the 'star',
        // insert a corresponding space on non-highlighted ones to keep
        // spacing consistent.
        &::before {
            content: " ";
        }
    }

    .hl {
        display: block;
        @include var(background-color, code-highlight-color);

        .lnt {
            border-left-color: $border-color;
            &::before {
                content: "*";
            }
        }
    }
}

.kr, .kd, .k {
    font-weight: bold;
    @include var(color, code-keyword-color);
}

.kt {
    font-weight: bold;
    @include var(color, code-type-color);
}

.c, .c1, .cm {
    color: $code-comment-color;
}