docker-docs/assets/css/callouts.css

/* callouts = blockquotes with classes
 *
 * Note: the left border is set using a custom property
 * in tailwind.config.js
 *
 * */

.prose blockquote {
  @apply bg-blue-light-100 p-4 font-normal not-italic dark:bg-blue-dark-100 text-blue-light-600 dark:text-blue-dark-800;
  quotes: none;
  > *:first-child {
    @apply relative ml-5 mt-0 before:absolute before:-left-5 before:font-icons before:content-['info'];
  }
  *:last-child {
    @apply mb-0 after:content-none;
  }

  &.warning {
    @apply border-l-red-light bg-red-light-100 text-red-light-600 dark:border-l-red-dark dark:bg-red-dark-100 dark:text-red-dark-800;
    > *:first-child {
      @apply before:content-['dangerous'];
    }
  }

  &.important {
    @apply border-l-amber-light bg-amber-light-100 text-amber-light-600 dark:border-l-amber-dark dark:bg-amber-dark-100 dark:text-amber-dark-800;
    > *:first-child {
      @apply before:content-['warning'];
    }
  }

  &.tip {
    @apply border-l-green-light bg-green-light-100 text-green-light-600 dark:border-l-green-dark dark:bg-green-dark-100 dark:text-green-dark-800;
    > *:first-child {
      @apply before:content-['lightbulb'];
    }
  }

  &.experimental {
    > *:first-child {
      @apply before:content-['science'];
    }
  }
  &.restricted {
    @apply border-l-violet-light bg-violet-light-100 text-violet-light-600 dark:border-l-violet-dark dark:bg-violet-dark-100 dark:text-violet-dark-800;
    > *:first-child {
      @apply before:content-['rocket\_launch'];
    }
  }
}