/* CSS Variables for Tailwind-related styles */
:root {
  --color-active-light: rgba(115, 115, 140, 0.05);
  --color-active-dark: rgba(39, 39, 63, 0.5);
  --color-outline-light: rgba(19, 22, 64, 0.15);
  --color-outline-dark: rgba(194, 196, 234, 0.15);
  --font-mono: "IBM Plex Mono", monospace;
  --font-sans: "Rubik", sans-serif;
  --font-size-14: 14px;
  --tw-text-opacity: 1;
  --color-content-secondary-light: rgb(115 115 140 / var(--tw-text-opacity, 1));
  --color-content-secondary-dark: rgb(143 143 163 / var(--tw-text-opacity, 1));
  --color-content-link-light: rgb(236 32 136 / var(--tw-text-opacity, 1));
}

/* Custom styles for code blocks */
.dm-code-snippet.dm-code-snippet.dm-code-snippet.dm-code-snippet {
  margin-top: 32px;
  margin-bottom: 32px;
  /* max-width: calc(100vw - var(--gutter)*2); */
}

/* @media (min-width: 768px) {
  .dm-code-snippet.dm-code-snippet.dm-code-snippet.dm-code-snippet {
    max-width: calc(100vw - var(--gutter)*2 - 280px - 24px);
  }
}

@media (min-width: 1024px) {
  .dm-code-snippet.dm-code-snippet.dm-code-snippet.dm-code-snippet {
    max-width: calc(100vw - var(--gutter)*2 - 280px - 64px);
  }
} */

.dm-code-snippet.dm-code-snippet.dm-code-snippet.dm-code-snippet
  .control-language {
  margin: 0px;
  padding: 0px;
  background-color: var(--color-active-light);
}

@media (prefers-color-scheme: dark) {
  .dm-code-snippet.dm-code-snippet.dm-code-snippet.dm-code-snippet
    .control-language {
    background-color: var(--color-active-dark);
  }
}

.dm-code-snippet.dm-code-snippet.dm-code-snippet.dm-code-snippet
  .control-language {
  border-radius: 4px;
  border-width: 1px;
  border-style: solid;
  border-color: var(--color-outline-light);
}

@media (prefers-color-scheme: dark) {
  .dm-code-snippet.dm-code-snippet.dm-code-snippet.dm-code-snippet
    .control-language {
    border-color: var(--color-outline-dark);
  }
}

.dm-code-snippet.dm-code-snippet.dm-code-snippet.dm-code-snippet
  .dm-buttons
  .dm-buttons-left
  .dm-button-snippet {
  display: none;
}

.dm-code-snippet.dm-code-snippet.dm-code-snippet.dm-code-snippet
  .dm-buttons
  .dm-buttons-left {
  flex: 1;
}

.dm-code-snippet.dm-code-snippet.dm-code-snippet.dm-code-snippet
  pre[class*="language-"] {
  background-color: transparent;
  padding: 16px;
}

.dm-code-snippet.dm-code-snippet.dm-code-snippet.dm-code-snippet
  #dm-code-raw.no-wrap,
.dm-code-snippet.dm-code-snippet.dm-code-snippet.dm-code-snippet
  #dm-code-raw.wrap {
  margin: 0px;
  padding: 0px;
  font-family: var(--font-mono);
  font-size: var(--font-size-14);
  line-height: 1em;
  line-height: 1.5;
  text-shadow: none;
  border: none;
  color: var(--color-content-secondary-light);
}

@media (prefers-color-scheme: dark) {
  .dm-code-snippet.dm-code-snippet.dm-code-snippet.dm-code-snippet,
    #dm-code-raw.no-wrap,
  .dm-code-snippet.dm-code-snippet.dm-code-snippet.dm-code-snippet,
    #dm-code-raw.wrap {
    color: var(--color-content-secondary-dark);
  }
}

.dm-code-snippet.dm-code-snippet.dm-code-snippet.dm-code-snippet
  .token.operator,
.dm-code-snippet.dm-code-snippet.dm-code-snippet.dm-code-snippet .token.entity,
.dm-code-snippet.dm-code-snippet.dm-code-snippet.dm-code-snippet .token.url,
.dm-code-snippet.dm-code-snippet.dm-code-snippet.dm-code-snippet
  .language-css
  .token.string,
.dm-code-snippet.dm-code-snippet.dm-code-snippet.dm-code-snippet
  .style
  .token.string {
  background-color: transparent;
}

.dm-code-snippet.dm-code-snippet.dm-code-snippet.dm-code-snippet .dm-buttons {
  margin: 0px;
  background-color: var(--color-active-light);
  padding: 16px;
}

@media (prefers-color-scheme: dark) {
  .dm-code-snippet.dm-code-snippet.dm-code-snippet.dm-code-snippet .dm-buttons {
    background-color: var(--color-active-dark);
  }
}

.dm-code-snippet.dm-code-snippet.dm-code-snippet.dm-code-snippet
  .dm-buttons
  .dm-buttons-right
  a {
  border-radius: 0px;
  background-color: transparent;
  padding: 0px;
  font-family: var(--font-sans);
  font-size: var(--font-size-14);
  line-height: 1em;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0em;
  color: var(--color-content-link-light);
  opacity: 1;
}

.dm-code-snippet.dm-code-snippet.dm-code-snippet.dm-code-snippet .dm-copy-text {
  position: relative;
}

.dm-code-snippet.dm-code-snippet.dm-code-snippet.dm-code-snippet
  #dm-copy-raw-code
  br {
  display: none;
}

.dm-code-snippet.dm-code-snippet.dm-code-snippet.dm-code-snippet
  .dm-copy-text::before {
  content: "";
  width: 14px;
  height: 18px;
  background-image: url("images/2025/single-guide/copy.svg");
  position: absolute;
  right: 115%;
  top: 0;
}