tabler/core/scss/ui/_code-block.scss

@use '../config' as *;

// A dark code surface around a pre, with an optional header and a copy button
.code-block {
  // scss-docs-start code-block-css-vars
  --code-block-bg: #{$code-block-bg};
  --code-block-color: #{$code-block-color};
  --code-block-border-radius: #{$code-block-border-radius};
  --code-block-box-shadow: #{$code-block-box-shadow};
  --code-block-header-bg: #{$code-block-header-bg};
  --code-block-header-color: #{$code-block-header-color};
  --code-block-header-border-color: #{$code-block-header-border-color};
  --code-block-header-box-shadow: #{$code-block-header-box-shadow};
  --code-block-header-padding-y: #{$code-block-header-padding-y};
  --code-block-header-padding-x: #{$code-block-header-padding-x};
  --code-block-title-color: #{$code-block-title-color};
  --code-block-title-font-weight: #{$code-block-title-font-weight};
  --code-block-lang-font-size: #{$code-block-lang-font-size};
  --code-block-copy-size: #{$code-block-copy-size};
  --code-block-copy-offset: #{$code-block-copy-offset};
  --code-block-copy-hover-bg: #{$code-block-copy-hover-bg};
  --code-block-line-number-color: #{$code-block-line-number-color};
  --code-block-line-number-width: #{$code-block-line-number-width};
  --code-block-line-number-gap: #{$code-block-line-number-gap};
  --code-block-highlight-bg: #{$code-block-highlight-bg};
  --code-block-highlight-border-color: #{$code-block-highlight-border-color};
  --code-block-max-height: #{$code-block-max-height};
  // scss-docs-end code-block-css-vars
  position: relative;
  margin-bottom: 1rem;
  overflow: hidden;
  color: var(--code-block-color);
  text-align: left;
  direction: ltr;
  background: var(--code-block-bg);
  box-shadow: var(--code-block-box-shadow);
  @include border-radius(var(--code-block-border-radius));

  pre {
    margin: 0;
    background: transparent;
    border-radius: 0;
  }

  code {
    display: block;
    width: max-content;
    min-width: 100%;
  }
}

.code-block-header {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 0.75rem;
  align-items: center;
  padding: var(--code-block-header-padding-y) var(--code-block-header-padding-x);
  color: var(--code-block-header-color);
  background: var(--code-block-header-bg);
  border-bottom: var(--border-width) solid var(--code-block-header-border-color);
  box-shadow: var(--code-block-header-box-shadow);
}

.code-block-title {
  min-width: 0;
  overflow: hidden;
  font-weight: var(--code-block-title-font-weight);
  color: var(--code-block-title-color);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.code-block-lang {
  margin-inline-start: auto;
  font-size: var(--code-block-lang-font-size);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.code-block-copy {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: var(--code-block-copy-size);
  height: var(--code-block-copy-size);
  padding: 0;
  color: var(--code-block-header-color);
  cursor: pointer;
  background: transparent;
  border: 0;
  @include border-radius(var(--border-radius));

  &:hover,
  &:focus-visible,
  &.copied {
    color: var(--code-block-color);
    background: var(--code-block-copy-hover-bg);
  }

  // Without a header the button floats over the corner of the code
  .code-block > & {
    position: absolute;
    inset-block-start: var(--code-block-copy-offset);
    inset-inline-end: var(--code-block-copy-offset);
    z-index: 1;
  }

  .icon {
    --icon-size: 1rem;
    margin: 0;
  }
}

// The lang label sits next to the copy button, so it only needs the push when it is alone
.code-block-header > .code-block-title + .code-block-copy,
.code-block-header > .code-block-copy:first-child {
  margin-inline-start: auto;
}

.code-block-scroll pre {
  max-height: var(--code-block-max-height);
}

.code-line {
  display: block;
  min-height: 1lh;
  padding-inline: $pre-padding;
  margin-inline: calc(-1 * #{$pre-padding});
}

.code-line-highlight {
  background: var(--code-block-highlight-bg);
  box-shadow: inset 2px 0 0 var(--code-block-highlight-border-color);
}

.code-block-numbered {
  code {
    counter-reset: code-line;
  }

  .code-line {
    counter-increment: code-line;

    &::before {
      display: inline-block;
      width: var(--code-block-line-number-width);
      margin-inline-end: var(--code-block-line-number-gap);
      color: var(--code-block-line-number-color);
      text-align: end;
      content: counter(code-line);
      user-select: none;
    }
  }
}