@mantine/code-highlight/styles.layer.css

Code highlight with Mantine theme

@layer mantine {.m_5cb1b9c8 {
  position: relative;
}

.m_e597c321 {
  position: relative;
  border-radius: var(--ch-radius, 0px);
  overflow: hidden;
}

:where([data-mantine-color-scheme='light']) .m_e597c321:where([data-with-border]) {
      border: 1px solid var(--mantine-color-gray-2);
}

:where([data-mantine-color-scheme='dark']) .m_e597c321:where([data-with-border]) {
      border: 1px solid var(--mantine-color-dark-6);
}

.m_e597c321:where([data-with-border]):where([data-code-color-scheme='dark']) {
      border: 1px solid var(--mantine-color-dark-6);
    }

.m_e597c321:where([data-with-border]):where([data-code-color-scheme='light']) {
      border: 1px solid var(--mantine-color-gray-2);
    }

:where([data-mantine-color-scheme='light']) .m_e597c321 {
    --ch-background: var(--mantine-color-gray-0);
}

:where([data-mantine-color-scheme='dark']) .m_e597c321 {
    --ch-background: var(--mantine-color-dark-8);
}

.m_dfe9c588 {
  border-radius: var(--ch-radius, var(--mantine-radius-sm));
  overflow: hidden;
  background-color: var(--ch-background);
  font-size: calc(0.8125rem * var(--mantine-scale));
  padding: calc(0.1875rem * var(--mantine-scale)) calc(0.3125rem * var(--mantine-scale));
}

:where([data-mantine-color-scheme='light']) .m_dfe9c588:where([data-with-border]) {
      border: 1px solid var(--mantine-color-gray-2);
}

:where([data-mantine-color-scheme='dark']) .m_dfe9c588:where([data-with-border]) {
      border: 1px solid var(--mantine-color-dark-6);
}

.m_dfe9c588:where([data-with-border]):where([data-code-color-scheme='dark']) {
      border: 1px solid var(--mantine-color-dark-6);
    }

.m_dfe9c588:where([data-with-border]):where([data-code-color-scheme='light']) {
      border: 1px solid var(--mantine-color-gray-2);
    }

:where([data-mantine-color-scheme='light']) .m_dfe9c588 {
    --ch-background: var(--mantine-color-gray-0);
}

:where([data-mantine-color-scheme='dark']) .m_dfe9c588 {
    --ch-background: var(--mantine-color-dark-8);
}

.m_2c47c4fd {
  --code-line-height: 1.7;

  display: block;
  margin: 0;
}

.m_2c47c4fd[data-with-offset] .m_5caae6d3 {
    padding-top: calc(3.125rem * var(--mantine-scale));
  }

.m_5caae6d3 {
  display: block;
  padding: var(--mantine-spacing-xs) var(--mantine-spacing-md);
  background-color: var(--ch-background);
  font-size: calc(0.8125rem * var(--mantine-scale));
  line-height: var(--code-line-height, var(--mantine-line-height));
  font-family: var(--mantine-font-family-monospace);
  width: fit-content;
  min-width: 100%;
}

.m_5caae6d3:where([data-inline]) {
    display: inline-block;
    padding: calc(0.1875rem * var(--mantine-scale)) calc(0.3125rem * var(--mantine-scale));
    background-color: var(--ch-background);
  }

.m_be7e9c9c {
  position: absolute;
  top: calc(0.5rem * var(--mantine-scale));
  right: calc(0.5rem * var(--mantine-scale));
  z-index: 1;
  background-color: var(--ch-background);
  border-bottom-left-radius: var(--mantine-radius-md);
}

.m_be7e9c9c:where([data-with-offset]) {
    top: calc(0.75rem * var(--mantine-scale));
  }

.m_d498bab7 {
  color: var(--mantine-color-text);
  opacity: 0.5;
}

@media (hover: hover) {

  .m_d498bab7:hover {
    color: var(--mantine-color-bright);
    opacity: 1;
  }
}

@media (hover: none) {

  .m_d498bab7:active {
    color: var(--mantine-color-bright);
    opacity: 1;
  }
}

.m_d498bab7:where([data-code-color-scheme='dark']) {
    color: var(--mantine-color-dark-0);
  }

@media (hover: hover) {

  .m_d498bab7:where([data-code-color-scheme='dark']):hover {
      color: var(--mantine-color-white);
  }
}

@media (hover: none) {

  .m_d498bab7:where([data-code-color-scheme='dark']):active {
      color: var(--mantine-color-white);
  }
}

.m_d498bab7:where([data-code-color-scheme='light']) {
    color: var(--mantine-color-black);
  }

@media (hover: hover) {

  .m_d498bab7:where([data-code-color-scheme='light']):hover {
      color: var(--mantine-color-black);
  }
}

@media (hover: none) {

  .m_d498bab7:where([data-code-color-scheme='light']):active {
      color: var(--mantine-color-black);
  }
}

.m_d498bab7 :where(svg) {
    width: calc(1.125rem * var(--mantine-scale));
    height: calc(1.125rem * var(--mantine-scale));
    display: block;
  }

.m_4c3d814c:where([data-code-color-scheme='light']) {
    background-color: var(--mantine-color-gray-9);
    color: var(--mantine-color-white);
  }

.m_4c3d814c:where([data-code-color-scheme='dark']) {
    background-color: var(--mantine-color-gray-2);
    color: var(--mantine-color-black);
  }

.m_f744fd40[data-collapsed] {
    max-height: var(--ch-max-height, 180px);
  }

.m_f744fd40[data-collapsed]::before {
      content: '';
      position: absolute;
      inset-inline: 0;
      bottom: 0;
      height: calc(5rem * var(--mantine-scale));
      pointer-events: none;
      background-image: linear-gradient(0deg, var(--ch-background) 25%, rgba(0, 0, 0, 0) 100%);
    }

.m_c9378bc2 {
  position: absolute;
  z-index: 2;
  bottom: 0;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  font-size: var(--mantine-font-size-sm);
  color: var(--mantine-color-anchor);
  width: 100%;
  text-align: center;
  padding-top: var(--mantine-spacing-xs);
  padding-bottom: var(--mantine-spacing-xs);
  white-space: nowrap;
}

.m_c9378bc2[data-hidden] {
    display: none;
  }

.m_c9378bc2:where([data-code-color-scheme='dark']) {
    color: var(--mantine-primary-color-5);
  }

.m_c9378bc2:where([data-code-color-scheme='light']) {
    color: var(--mantine-primary-color-6);
  }

.m_5cac2e62 {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--mantine-font-size-xs);
  gap: calc(0.4375rem * var(--mantine-scale));
  padding: calc(0.3125rem * var(--mantine-scale)) calc(0.5625rem * var(--mantine-scale));
  font-family: var(--mantine-font-family-monospace);
  font-weight: 700;
  line-height: 1;
  user-select: none;
  cursor: pointer;
  opacity: 0.8;
  border: calc(0.0625rem * var(--mantine-scale)) solid transparent;
  white-space: nowrap;
  margin: 0;
  border-radius: var(--mantine-radius-default);
}

.m_5cac2e62:where([data-active]) {
    opacity: 1;
  }

:where([data-mantine-color-scheme='light']) .m_5cac2e62 {
    border-color: var(--mantine-color-gray-3);
    color: var(--mantine-color-gray-8);
}

:where([data-mantine-color-scheme='light']) .m_5cac2e62:where([data-active]) {
      background-color: var(--mantine-color-white);
      color: var(--mantine-color-black);
    }

:where([data-mantine-color-scheme='dark']) .m_5cac2e62 {
    border-color: var(--mantine-color-dark-4);
    color: var(--mantine-color-dark-0);
}

:where([data-mantine-color-scheme='dark']) .m_5cac2e62:where([data-active]) {
      background-color: var(--mantine-color-dark-5);
      color: var(--mantine-color-white);
    }

.m_5cac2e62:where([data-color-scheme='light']) {
    border-color: var(--mantine-color-gray-3);
    color: var(--mantine-color-gray-8);
  }

.m_5cac2e62:where([data-color-scheme='light']):where([data-active]) {
      background-color: var(--mantine-color-white);
      color: var(--mantine-color-black);
    }

.m_5cac2e62:where([data-color-scheme='dark']) {
    border-color: var(--mantine-color-dark-4);
    color: var(--mantine-color-dark-0);
  }

.m_5cac2e62:where([data-color-scheme='dark']):where([data-active]) {
      background-color: var(--mantine-color-dark-5);
      color: var(--mantine-color-white);
    }

@media (hover: hover) {

  .m_5cac2e62:hover {
    opacity: 1;
  }
}

@media (hover: none) {

  .m_5cac2e62:active {
    opacity: 1;
  }
}

.m_5cac2e62:where(:only-child) {
    cursor: default;
  }

.m_b46cddfb :where(svg) {
    display: block;
  }

.m_7b14120b {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  right: calc(4.375rem * var(--mantine-scale));
}

.m_38d99e51 {
  display: flex;
  padding: calc(0.75rem * var(--mantine-scale)) calc(0.625rem * var(--mantine-scale));
  padding-bottom: 0;
  gap: var(--mantine-spacing-xs);
}
}