/*
 * callouts.css - GitHub alerts, Obsidian callouts and legacy Wiki.js
 * blockquote classes, all rendered from one markup shape.
 *
 * Colour comes from --strata-callout-rgb, an "R, G, B" triple set per callout
 * type below, so backgrounds can be a low-alpha tint of the same hue used for
 * the icon and title. Shape (tint strength, accent bar, radius, padding) is
 * supplied by the theme, which is how the same callout reads as a GitHub
 * alert, an Obsidian callout or a VS Code notice.
 */

.strata-callout {
  display: block;
  margin: 0 0 var(--strata-block-gap);
  border: var(--strata-callout-border-width) solid rgba(var(--strata-callout-rgb), var(--strata-callout-border-alpha, 0.25));
  border-left: var(--strata-callout-accent-width, 0) solid rgb(var(--strata-callout-rgb));
  border-radius: var(--strata-callout-radius);
  background-color: rgba(var(--strata-callout-rgb), var(--strata-callout-bg-alpha));
  color: var(--strata-text);
  overflow: hidden;
}

.strata-callout-title {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: var(--strata-callout-title-padding, 8px 16px 0);
  background-color: rgba(var(--strata-callout-rgb), var(--strata-callout-title-bg-alpha));
  color: rgb(var(--strata-callout-rgb));
  font-weight: var(--strata-callout-title-weight);
  line-height: 1.4;
}

.strata-callout-icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  height: calc(1.4em);
}

.strata-callout-icon svg {
  width: 1.05em;
  height: 1.05em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Filled icons (GitHub uses solid Octicons) opt in with this attribute. */
.strata-callout-icon[data-icon-style='filled'] svg {
  fill: currentColor;
  stroke: none;
}

.strata-callout-title-text {
  flex: 1 1 auto;
  min-width: 0;
}

.strata-callout-content {
  padding: var(--strata-callout-content-padding, 4px 16px 8px);
}

.strata-callout-content > :last-child {
  margin-bottom: 0;
}

.strata-callout-content > :first-child {
  margin-top: 0;
}

/* A callout whose body is empty (title-only) should not leave a gap. */
.strata-callout-content:empty {
  display: none;
}

/* Nested content inherits the tint, so keep inner blocks readable. */
.strata-callout blockquote {
  border-left-color: rgba(var(--strata-callout-rgb), 0.45);
}

/* ------------------------------------------------------- foldable callouts */

details.strata-callout > summary.strata-callout-title {
  cursor: pointer;
  list-style: none;
  user-select: none;
}

details.strata-callout > summary.strata-callout-title::-webkit-details-marker {
  display: none;
}

.strata-callout-fold {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  margin-left: auto;
  padding-left: 8px;
  transition: transform 0.15s ease-in-out;
}

.strata-callout-fold svg {
  width: 0.9em;
  height: 0.9em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

details.strata-callout:not([open]) .strata-callout-fold {
  transform: rotate(-90deg);
}

details.strata-callout:not([open]) > summary.strata-callout-title {
  padding-bottom: var(--strata-callout-fold-closed-pad, 8px);
}

/* ------------------------------------------------------------ type palette */

.strata-callout[data-callout='note'],
.strata-callout[data-callout='info'],
.strata-callout[data-callout='todo'] {
  --strata-callout-rgb: var(--strata-color-blue);
}

.strata-callout[data-callout='abstract'],
.strata-callout[data-callout='hint'] {
  --strata-callout-rgb: var(--strata-color-cyan);
}

.strata-callout[data-callout='tip'],
.strata-callout[data-callout='success'] {
  --strata-callout-rgb: var(--strata-color-green);
}

.strata-callout[data-callout='important'],
.strata-callout[data-callout='example'] {
  --strata-callout-rgb: var(--strata-color-purple);
}

.strata-callout[data-callout='question'] {
  --strata-callout-rgb: var(--strata-color-yellow);
}

.strata-callout[data-callout='warning'] {
  --strata-callout-rgb: var(--strata-color-orange);
}

.strata-callout[data-callout='caution'],
.strata-callout[data-callout='failure'],
.strata-callout[data-callout='danger'],
.strata-callout[data-callout='bug'] {
  --strata-callout-rgb: var(--strata-color-red);
}

.strata-callout[data-callout='quote'] {
  --strata-callout-rgb: var(--strata-color-gray);
}