bulma/sass/components/message.sass

$message-background-color: $background !default
$message-radius: $radius !default

$message-header-background-color: $text !default
$message-header-color: $text-invert !default
$message-header-weight: $weight-bold !default
$message-header-padding: 0.75em 1em !default
$message-header-radius: $radius !default

$message-body-border-color: $border !default
$message-body-border-width: 0 0 0 4px !default
$message-body-color: $text !default
$message-body-padding: 1.25em 1.5em !default
$message-body-radius: $radius !default

$message-body-pre-background-color: $scheme-main !default
$message-body-pre-code-background-color: transparent !default

$message-header-body-border-width: 0 !default
$message-colors: $colors !default

.message
  @extend %block
  background-color: $message-background-color
  border-radius: $message-radius
  font-size: $size-normal
  strong
    color: currentColor
  a:not(.button):not(.tag):not(.dropdown-item)
    color: currentColor
    text-decoration: underline
  // Sizes
  &.is-small
    font-size: $size-small
  &.is-medium
    font-size: $size-medium
  &.is-large
    font-size: $size-large
  // Colors
  @each $name, $components in $message-colors
    $color: nth($components, 1)
    $color-invert: nth($components, 2)
    $color-light: null
    $color-dark: null

    @if length($components) >= 3
      $color-light: nth($components, 3)
      @if length($components) >= 4
        $color-dark: nth($components, 4)
      @else
        $color-luminance: colorLuminance($color)
        $darken-percentage: $color-luminance * 70%
        $desaturate-percentage: $color-luminance * 30%
        $color-dark: desaturate(darken($color, $darken-percentage), $desaturate-percentage)
    @else
      @if type-of($color) == 'color'
        $color-lightning: max((100% - lightness($color)) - 2%, 0%)
        $color-light: lighten($color, $color-lightning)
      @else
        $color-light: $color

    &.is-#{$name}
      background-color: var(--#{$name}-light, #{$color-light})
      .message-header
        background-color: var(--#{$name}, #{$color})
        color: var(--#{$name}-invert, #{$color-invert})
      .message-body
        border-color: var(--#{$name}, #{$color})
        color: var(--#{$name}-dark, #{$color-dark})

.message-header
  align-items: center
  background-color: $message-header-background-color
  border-radius: $message-header-radius $message-header-radius 0 0
  color: $message-header-color
  display: flex
  font-weight: $message-header-weight
  justify-content: space-between
  line-height: 1.25
  padding: $message-header-padding
  position: relative
  .delete
    flex-grow: 0
    flex-shrink: 0
    +ltr-property("margin", 0.75em, false)
  & + .message-body
    border-width: $message-header-body-border-width
    border-top-left-radius: 0
    border-top-right-radius: 0

.message-body
  border-color: $message-body-border-color
  border-radius: $message-body-radius
  border-style: solid
  border-width: $message-body-border-width
  color: $message-body-color
  padding: $message-body-padding
  code,
  pre
    background-color: $message-body-pre-background-color
  pre code
    background-color: $message-body-pre-code-background-color