.custom-block {
    @apply .px-6 .py-1 .my-4 .rounded .border;

    & > .custom-block-title {
        @apply .font-semibold;
    }

    & > .custom-block-title, & > p {
        @apply .my-3;
    }

    &.warning {
        @apply .bg-yellow-lightest .border-yellow-dark;

        & p, & > .custom-block-title {
            @apply .text-yellow-darker;
        }
    }

    &.tip {
        @apply .bg-blue-lightest .border-blue-dark;

        & p, & > .custom-block-title {
            @apply .text-blue-darker;
        }
    }

    &.danger {
        @apply .bg-red-lightest .border-red-dark;

        & p, & > .custom-block-title {
            @apply .text-red-darker;
        }
    }
}
