/* Available themes: https://github.com/PrismJS/prism-themes */
@import 'prism-themes/themes/prism-material-dark.min.css';

/* PrismJS Command Line Plugin CSS - copied directly */
.command-line-prompt {
	/* border-right: 1px solid #999;
	margin-right: 1em; */
	display: block;
	float: left;
	font-size: 100%;
	letter-spacing: -1px;
	pointer-events: none;
	text-align: right;

	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.command-line-prompt > span[data-user][data-host]:before {
	content: "[" attr(data-user) "@" attr(data-host) "] $";
	opacity: 0.3;
	display: block;
	padding-right: 0.8em;
}

.command-line-prompt > span[data-user="root"][data-host]:before {
	content: "[" attr(data-user) "@" attr(data-host) "] #";
	opacity: 0.3;
	display: block;
	padding-right: 0.8em;
}

.command-line-prompt > span[data-prompt]:not([data-user]):before {
	content: attr(data-prompt);
	opacity: 0.3;
	display: block;
	padding-right: 0.8em;
}

.command-line-prompt > span[data-continuation-prompt]:before {
	content: attr(data-continuation-prompt);
	opacity: 0.3;
	display: block;
	padding-right: 0.8em;
}

.command-line-prompt > span:before {
	opacity: 0.3;
	content: ' ';
	display: block;
	padding-right: 0.8em;
}

.command-line span.token.output {
	/* Make shell output lines a bit lighter to distinguish them from shell commands */
	opacity: 0.7;
}

pre {
  @apply overflow-auto;
}

code {
  background: "none !important";
  color: var(--tw-prose-pre-code);
}

pre[class*='language-'] {
  background: var(--tw-prose-pre-bg);
}

pre[class*='language-'] code[class*='language-'] {
  background-color: unset;
}

/**
 * Adds code highlighting & line numbers
 * Inspired by gatsby remark prism - https://www.gatsbyjs.com/plugins/gatsby-remark-prismjs/
 * 1. Make the element just wide enough to fit its content.
 * 2. Always fill the visible space in .code-highlight.
 */

.code-highlight {
  min-width: 100%; /* 2 */
}

.code-line {
  display: block;
  padding-left: 16px;
  padding-right: 16px;
  margin-left: -16px;
  margin-right: -16px;
  border-left-width: 4px;
  border-left-color: rgba(31, 41, 55, 0); /* Set code block color */
  border-left-style: solid;
}

.code-line.inserted {
  background-color: rgba(16, 185, 129, 0.2); /* Set inserted line (+) color */
}

.code-line.deleted {
  background-color: rgba(239, 68, 68, 0.2); /* Set deleted line (-) color */
}

.highlight-line {
  margin-left: -16px;
  margin-right: -16px;
  background-color: rgba(55, 65, 81, 0.5); /* Set highlight bg color */
  border-left-width: 4px;
  border-left-color: rgb(59, 130, 246); /* Set highlight accent border color */
  border-left-style: solid;
}

.line-number::before {
  display: inline-block;
  width: 1rem;
  text-align: right;
  margin-right: 16px;
  margin-left: -8px;
  color: rgba(156, 163, 175, 0.3); /* Line number color */
  content: attr(line);
}

.strikethrough-line {
  opacity: 0.5; /* Dimmat utseende */
  color: rgba(156, 163, 175, 0.7); /* Gråare färg för deprecated kod */
}

.strikethrough-line .strikethrough-content {
  text-decoration: line-through;
  text-decoration-color: currentColor;
  text-decoration-thickness: 1px;
}