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

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

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

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

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

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