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

$message-header-background-color ?= $text
$message-header-color ?= $text-invert
$message-header-padding ?= 0.5em 0.75em
$message-header-radius ?= $radius

$message-body-border ?= 1px solid $border
$message-body-color ?= $text
$message-body-padding ?= 1em 1.25em
$message-body-radius ?= $radius

$message-body-pre-background-color ?= $white
$message-body-pre-code-background-color ?= transparent

.message
  block()
  background-color $message-background-color
  border-radius $message-radius
  font-size $size-normal
  strong
    color currentColor
  &:not(.button):not(.tag)
    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, $pair in $colors
    $color = $pair['1']
    $color-invert = $pair['2']
    $color-lightning = max((100% - lightness($color)) - 2%, 0%)
    $color-luminance = colorLuminance($color)
    $darken-percentage = $color-luminance * 70%
    $desaturate-percentage = $color-luminance * 30%
    &.is-{$name}
      background-color lighten($color, $color-lightning)
      .message-header
        background-color color
        color $color-invert
      .message-body
        border-color $color
        color desaturate(darken($color, $darken-percentage), $desaturate-percentage)

.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
  justify-content space-between
  line-height 1.25
  padding $message-header-padding
  position relative
  .delete
    flex-grow 0
    flex-shrink 0
    margin-left 0.75em
  & + .message-body
    border-top-left-radius 0
    border-top-right-radius 0
    border-top none

.message-body
  border $message-body-border
  border-radius $message-body-radius
  color $message-body-color
  padding $message-body-padding
  code,
  pre
    background $message-body-pre-background-color
  pre code
    background $message-body-pre-code-background-color