oliverbooth.dev/src/scss/markdown-callouts.scss

$callout-bg-blue: #1b2735;
$callout-bg-cyan: #233232;
$callout-bg-green: #223026;
$callout-bg-orange: #332a21;
$callout-bg-red: #352223;
$callout-bg-purple: #2c2835;
$callout-bg-grey: #2b2b2b;

$callout-fg-blue: #157aff;
$callout-fg-cyan: #53dfdd;
$callout-fg-green: #44cf6e;
$callout-fg-orange: #e9973f;
$callout-fg-red: #fb464c;
$callout-fg-purple: #a882ff;
$callout-fg-grey: #9e9e9e;

.callout {
  font-size: 16px;
  border-radius: 5px;
  padding: 20px;
  margin-bottom: 1rem;

  .callout-title {
    font-weight: bold;
    margin-bottom: 1rem;
  }

  p:last-child {
    margin-bottom: 0;
  }

  &.collapsible {
    .callout-fold {
      transform: rotate(180deg);
      transition: transform 500ms;
      margin-left: 0.5em;

      svg {
        transform: rotate(180deg);
        transition: transform 500ms;
      }
    }

    .callout-title {
      cursor: pointer;
      transition: margin-bottom 500ms;
    }

    .callout-content {
      opacity: 1;
      max-height: 500px;
      transition: opacity 500ms, max-height 500ms;
    }

    &.collapsed {
      .callout-title {
        margin-bottom: 0;
      }

      .callout-fold svg {
        transform: rotate(0deg);
      }

      .callout-content {
        opacity: 0;
        max-height: 0;
      }
    }
  }

  &[data-callout="note"] {
    background-color: $callout-bg-blue;

    .callout-title {
      color: $callout-fg-blue;
    }
  }

  &[data-callout="abstract"] {
    background-color: $callout-bg-cyan;

    .callout-title {
      color: $callout-fg-cyan;
    }
  }

  &[data-callout="info"] {
    background-color: $callout-bg-blue;

    .callout-title {
      color: $callout-fg-blue;
    }
  }

  &[data-callout="todo"] {
    background-color: $callout-bg-blue;

    .callout-title {
      color: $callout-fg-blue;
    }
  }

  &[data-callout="tip"] {
    background-color: $callout-bg-cyan;

    .callout-title {
      color: $callout-fg-cyan;
    }
  }

  &[data-callout="important"] {
    background-color: $callout-bg-orange;

    .callout-title {
      color: $callout-fg-orange;
    }
  }

  &[data-callout="success"] {
    background-color: $callout-bg-green;

    .callout-title {
      color: $callout-fg-green;
    }
  }

  &[data-callout="question"] {
    background-color: $callout-bg-cyan;

    .callout-title {
      color: $callout-fg-cyan;
    }
  }

  &[data-callout="warning"] {
    background-color: $callout-bg-orange;

    .callout-title {
      color: $callout-fg-orange;
    }
  }

  &[data-callout="failure"] {
    background-color: $callout-bg-red;

    .callout-title {
      color: $callout-fg-red;
    }
  }

  &[data-callout="danger"] {
    background-color: $callout-bg-red;

    .callout-title {
      color: $callout-fg-red;
    }
  }

  &[data-callout="bug"] {
    background-color: $callout-bg-red;

    .callout-title {
      color: $callout-fg-red;
    }
  }

  &[data-callout="example"] {
    background-color: $callout-bg-purple;

    .callout-title {
      color: $callout-fg-purple;
    }
  }

  &[data-callout="cite"] {
    background-color: $callout-bg-grey;

    .callout-title {
      color: $callout-fg-grey;
    }
  }

  &[data-callout="update"] {
    background-color: $callout-bg-blue;

    .callout-title {
      color: $callout-fg-blue;
    }
  }
}

svg.lucide {
  width: 16px;
}