$message-background-color ?= $background
$message-radius ?= $radius

$message-header-background-color ?= $text
$message-header-color ?= $text-invert
$message-header-weight ?= $weight-bold
$message-header-padding ?= 0.75em 1em
$message-header-radius ?= $radius

$message-body-border-color ?= $border
$message-body-border-width ?= 0 0 0 4px
$message-body-color ?= $text
$message-body-padding ?= 1.25em 1.5em
$message-body-radius ?= $radius

$message-body-pre-background-color ?= $scheme-main
$message-body-pre-code-background-color ?= transparent

$message-header-body-border-width ?= 0
$message-colors ?= $colors

.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
  for $name, $components in $message-colors
    $color = $components['1']
    $color-invert = $components['2']
    $color-light = null
    $color-dark = null

    if length($components) >= 3
      $color-light = $components['3']
      if length($components) >= 4
        $color-dark = $components['4']
      else
        $color-luminance = colorLuminance($color)
        $darken-percentage = $color-luminance * 70%
        $desaturate-percentage = $color-luminance * 30%
        $color-dark = desaturate(bulma-stylus-darken($color, $darken-percentage), $desaturate-percentage)
    else
      $color-lightning = max((100% - lightness($color)) - 2%, 0%)
      $color-light = bulma-stylus-lighten($color, $color-lightning)

    &.is-{$name}
      background-color $color-light
      .message-header
        background-color $color
        color $color-invert
      .message-body
        border-color $color
        if $color-dark
          color $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