@reference "../css/globals.css";

.markdown p:first-child,
.markdown .paragraph:first-child {
  /* This is needed when markdown is used inside buttons or labels  */
  margin-block-start: 0;
}

.markdown p:last-child,
/* This is needed when markdown is used inside buttons or labels  */
.markdown .paragraph:last-child {
  margin-block-end: 0;
}

.markdown ul li,
.markdown ol li {
  margin-block: 0;
}

/* Restore browser default bullet cycling that Tailwind Typography overrides */
.markdown ul ul {
  list-style-type: revert;
}

.markdown h1 {
  text-align: start;
}

.config-width-full .markdown h1 {
  /* In full-width display, we left-align the title */
  text-align: start;
}

.markdown .paragraph {
  /*
  we convert <p> to span.paragraph to support nesting,
  so we need to apply the same formatting
  */
  display: block;
  margin-block: 1rem;
  margin-inline: 0;
}

.markdown h1,
.markdown h2,
.markdown h3,
.markdown h4,
.markdown h5,
.markdown h6 {
  font-weight: inherit;
  font-family: var(--heading-font);
}

.markdown hr {
  margin-block: 0.5rem;
}

.markdown a {
  cursor: pointer;
  text-decoration: inherit;

  @apply text-link;
}

.markdown a:hover,
.markdown a:active {
  text-decoration: underline;
}

.markdown a:visited {
  @apply text-link-visited;
}

.mo-label .markdown p,
.mo-label-block .markdown p,
.mo-label .markdown .paragraph,
.mo-label-block .markdown .paragraph {
  /* This is needed when markdown is used inside labels  */
  padding: 0;
  margin: 0;
}

/* stylelint-disable unit-allowed-list */

/* pad iconify-icon when next to text */
a .markdown .paragraph:has(iconify-icon) {
  gap: 0.4em;
}

/* pad iconify-icon when in navigation items */
a .markdown iconify-icon:first-child {
  margin-inline-end: 0.4em;
}

/* make links and their contents inline-flex to avoid extra gaps */
a > .markdown > .paragraph {
  display: inline-flex;
}

iconify-icon {
  display: inline-flex;
  align-items: center;
}

/* align icons with buttons better */
button .markdown .paragraph {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4em;

  iconify-icon {
    align-self: center;
  }
}

/* stylelint-enable unit-allowed-list */

/*
Disable max-width for prose in buttons
This change includes accordions https://github.com/marimo-team/marimo/issues/2217
*/
button .prose.prose {
  max-width: none;
}

/* Task list */

.prose .task-list-item {
  list-style-type: none !important;
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}

.prose .task-list-item input[type="checkbox"] {
  margin: 0 0.5rem 0.25rem -1.6rem;
  vertical-align: middle;
}

/* Tabs */

.tabbed-set {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  border-radius: var(--radius);
}

.tabbed-set > input {
  display: none;
}

.tabbed-set label {
  width: auto;
  padding: 0.2rem 1rem;
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-sm);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
  cursor: pointer;
  transition:
    background-color var(--transition),
    color var(--transition);
  color: var(--muted-foreground);
}

.tabbed-set .tabbed-content {
  width: 100%;
  display: none;
  box-shadow: 0 -1px var(--border);
  background-color: var(--background);
  padding: 0.5rem 1rem;
}

.tabbed-set input {
  position: absolute;
  opacity: 0;
}

.tabbed-set input:checked:nth-child(n + 1) + label {
  color: var(--foreground);
  border-color: var(--primary);
  background-color: var(--background);
}

.tabbed-set label:hover {
  color: var(--foreground);
  background-color: var(--accent);
}

@media screen {
  .tabbed-set input:nth-child(n + 1):checked + label + .tabbed-content {
    order: 99;
    display: block;
  }
}

@media print {
  .tabbed-content {
    display: contents;
  }
}

/* Critic Markup */

.prose .critic {
  font-family: inherit;
  border-radius: 3px;
  border-style: solid;
  border-width: 1px;
  padding-top: 0.1rem;
  padding-bottom: 0.1rem;
  text-decoration: none;
}

.prose .critic::before,
.prose .critic::after {
  content: "\00a0";
  padding-top: 0.1rem;
  padding-bottom: 0.1rem;
  font-size: initial;
}

.prose .block::before,
.prose .block::after {
  content: "";
}

.prose mark.critic {
  border-color: var(--orange-9);
  background: var(--orange-3);
}

.prose ins.critic {
  border-color: var(--grass-9);
  background: var(--grass-3);
}

.prose del.critic {
  border-color: var(--red-9);
  background: var(--red-3);
}

.prose ins.break,
.prose del.break {
  font-size: 0;
  border: none;
}

.prose ins.break::before,
.prose del.break::before {
  content: "\00a0\b6\00a0";
  border-radius: 3px;
}

.prose ins.after,
.prose del.after {
  content: "";
}

.prose ins.break::before {
  color: var(--green-9);
  border: 1px solid var(--green-9);
  background: var(--green-3);
}

.prose del.break::before {
  color: var(--red-9);
  border: 1px solid var(--red-9);
  background: var(--red-3);
}

.prose span.critic {
  background: var(--blue-3);
  border: 0;
  border-top: 1px solid var(--blue-9);
  border-bottom: 1px solid var(--blue-9);
}

.prose span.critic::before,
.prose span.critic::after {
  font-size: inherit;
  background: var(--blue-3);
  border: 1px solid var(--blue-9);
}

.prose span.critic::before {
  content: "\00a0\bb";
  border-right: none;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}

.prose span.critic::after {
  content: "ab\00a0";
  border-left: none;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}

.prose .block {
  display: block;
  padding: 0.02rem;
}

/* Keys */

.prose .keys {
  @apply space-x-1;
}

/* Details */

.prose .details {
  @apply space-y-1;
}

.markdown details {
  @apply rounded-lg border bg-card;

  margin: 1rem 0;
  border-left-width: 6px;
}

.markdown details.warn,
.markdown details.warning {
  border-left-color: var(--yellow-8);
}

.markdown details.info,
.markdown details.note {
  border-left-color: var(--blue-8);
}

.markdown details.error,
.markdown details.danger,
.markdown details.caution {
  border-left-color: var(--red-8);
}

.markdown details.success,
.markdown details.tip {
  border-left-color: var(--grass-8);
}

.markdown details.important {
  border-left-color: var(--cyan-8);
}

.markdown details.hint {
  border-left-color: var(--gray-8);
}

.markdown details summary {
  @apply cursor-pointer p-4 font-medium;

  list-style: none;
  user-select: none;
}

.markdown details summary::-webkit-details-marker {
  display: none;
}

.markdown details summary::before {
  content: "";
  border-style: solid;
  border-color: var(--slate-8);
  border-width: 0.15rem 0.15rem 0 0;
  display: inline-block;
  padding: 0.2rem;
  margin-right: 1rem;
  transform: rotate(45deg);
  transition: transform 0.2s;
  vertical-align: middle;
}

.markdown details[open] summary::before {
  transform: rotate(135deg);
}

.markdown details > :not(summary) {
  @apply p-4 pt-0;
}

/* Restore proper list indentation inside details blocks.
   The p-4 above overrides prose's padding-inline-start for bullet space.
   This ensures bullets render correctly with list-style-position: outside. */
.markdown details > :is(ul, ol) {
  padding-inline-start: 2.5rem;
}

.markdown .codehilite {
  background-color: var(--slate-2);
  border-radius: 4px;
}