.callout {
  overflow-x: auto;
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column; /* Makes sure content is organized in a column */
  border-radius: 0.3rem;
  border-width: 1px;
}

/* New callout-header class for the emoji and title */
.callout-header {
  display: flex;
  align-items: center;
  padding: 0.25rem 1rem;
  width: 100%; /* This ensures the header takes full width */
}

.callout-emoji {
  user-select: none;
  font-size: 1rem;
  padding-right: 0.25rem; /* Adjusted padding */
  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
}

.callout-content {
  overflow: hidden;
  font-size: 0.8rem;
  width: 100%;
  padding: 0.5rem 1rem; /* Add padding for content */
  min-width: 0;
  line-height: 1.25rem;
  border-radius: 0 0 0.5rem 0.5rem; /* Round bottom corners */
  background-color: #ffffffcc; /* Separate background color for content */
  color: #000;
}

.callout-content p,
.callout-content ul {
  margin-bottom: 0;
  margin-top: 0;
}

.callout-content h3 {
  margin-top: 0;
  line-height: 1.2; /* adjust the value to your liking */
}

:global(.dark) .callout-content {
  background-color: #080808cc; /* Separate background color for content */
  color: #fff;
}

.callout-title {
  font-size: 0.9rem;
  font-weight: bold;
  display: flex;
  justify-content: space-between; /* Ensures elements are spaced out */
  align-items: center;
  width: 100%; /* Fills the parent container's width */
  color: #000000;
}

:global(.dark) .callout-title {
  color: #ffffff;
}

.title-text {
  margin-right: 0.5rem;
}

.arrow {
  font-size: 0.8rem;
}

.callout {
  --content-background-color: #ffffff;

  --default-border-color: #d1d5db;
  --default-background-color: #f3f4f6;

  --note-border-color: #488bfb;
  --note-background-color: #ecf3ff;

  --abstract-border-color: #1cb1fc;
  --abstract-background-color: #e8f7ff;

  --info-border-color: #1cb9d2;
  --info-background-color: #e8f8fa;

  --tip-border-color: #1cbfa5;
  --tip-background-color: #e8f9f6;

  --success-border-color: #1dc859;
  --success-background-color: #e8f9f6;

  --question-border-color: #68dd31;
  --question-background-color: #f0fcea;

  --warning-border-color: #fd9025;
  --warning-background-color: #fff4e9;

  --error-border-color: #fd4f56;
  --error-background-color: #ffedee;

  --danger-border-color: #fc0648;
  --danger-background-color: #ffe6ec;

  --bug-border-color: #f20059;
  --bug-background-color: #fee5ee;

  --example-border-color: #7c4efb;
  --example-background-color: #f2edff;

  --quote-border-color: #cd41b9;
  --quote-background-color: #ffd5f9;
}

:global(.dark) .callout {
  --content-background-color: #080808;

  --default-border-color: #9e9e9e;
  --default-background-color: #2b2e35;

  --note-border-color: #488bfb;
  --note-background-color: #222c3f;

  --abstract-border-color: #1cb1fc;
  --abstract-background-color: #1e303f;

  --info-border-color: #1cb9d2;
  --info-background-color: #1e313a;

  --tip-border-color: #1cc0a5;
  --tip-background-color: #1e3236;

  --success-border-color: #1dc859;
  --success-background-color: #1e322e;

  --question-border-color: #68dd31;
  --question-background-color: #26352a;

  --warning-border-color: #fd9025;
  --warning-background-color: #352d29;

  --error-border-color: #fd4f56;
  --error-background-color: #35262e;

  --danger-border-color: #fc0648;
  --danger-background-color: #351f2c;

  --bug-border-color: #f20059;
  --bug-background-color: #341e2e;

  --example-border-color: #7c4efb;
  --example-background-color: #28263f;

  --quote-border-color: #7a054f;
  --quote-background-color: #1f0f19;
}

.callout-default {
  border-color: var(--default-border-color);
  background-color: var(--default-background-color);
}

.callout-note {
  border-color: var(--note-border-color);
  background-color: var(--note-background-color);
}

.callout-abstract {
  border-color: var(--abstract-border-color);
  background-color: var(--abstract-background-color);
}

.callout-info {
  border-color: var(--info-border-color);
  background-color: var(--info-background-color);
}

.callout-tip {
  border-color: var(--tip-border-color);
  background-color: var(--tip-background-color);
}

.callout-success {
  border-color: var(--success-border-color);
  background-color: var(--success-background-color);
}

.callout-question {
  border-color: var(--question-border-color);
  background-color: var(--question-background-color);
}

.callout-warning {
  border-color: var(--warning-border-color);
  background-color: var(--warning-background-color);
}

.callout-error {
  border-color: var(--error-border-color);
  background-color: var(--error-background-color);
}

.callout-danger {
  border-color: var(--danger-border-color);
  background-color: var(--danger-background-color);
}

.callout-bug {
  border-color: var(--bug-border-color);
  background-color: var(--bug-background-color);
}

.callout-example {
  border-color: var(--example-border-color);
  background-color: var(--example-background-color);
}

.callout-quote {
  border-color: var(--quote-border-color);
  background-color: var(--quote-background-color);
}
