$message-background-color: var(--background, #{$background}) !default
$message-font-size: var(--size-normal, #{$size-normal}) !default
$message-radius: var(--radius, #{$radius}) !default

$message-header-background-color: var(--text, #{$text}) !default
$message-header-color: var(--text-invert, #{$text-invert}) !default
$message-header-weight: var(--weight-bold, #{$weight-bold}) !default
$message-header-padding: 0.75em 1em !default
$message-header-radius: var(--radius, #{$radius}) !default

$message-body-border-color: var(--border, #{$border}) !default
$message-body-border-width: 0 0 0 4px !default
$message-body-color: var(--text, #{$text}) !default
$message-body-padding: 1.25em 1.5em !default
$message-body-radius: var(--radius, #{$radius}) !default

$message-body-pre-background-color: var(--scheme-main, #{$scheme-main}) !default
$message-body-pre-code-background-color: transparent !default

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

.message
  --message-background-color: #{$message-background-color}
  --message-font-size: #{$message-font-size}
  --message-radius: #{$message-radius}
  --message-header-background-color: #{$message-header-background-color}
  --message-header-color: #{$message-header-color}
  --message-header-weight: #{$message-header-weight}
  --message-header-padding: #{$message-header-padding}
  --message-header-radius: #{$message-header-radius}
  --message-body-border-color: #{$message-body-border-color}
  --message-body-radius: #{$message-body-radius}
  --message-body-border-width: #{$message-body-border-width}
  --message-body-color: #{$message-body-color}
  --message-body-padding: #{$message-body-padding}
  --message-body-pre-background-color: #{$message-body-pre-background-color}
  --message-body-pre-code-background-color: #{$message-body-pre-code-background-color}
  --message-header-body-border-width: #{$message-header-body-border-width}
  @extend %block
  background-color: var(--message-background-color)
  border-radius: var(--message-radius)
  font-size: var(--message-font-size)
  strong
    color: currentColor
  a:not(.button):not(.tag):not(.dropdown-item)
    color: currentColor
    text-decoration: underline
  // Sizes
  &.is-small
    --message-font-size: var(--size-small, #{$size-small})
  &.is-medium
    --message-font-size: var(--size-medium, #{$size-medium})
  &.is-large
    --message-font-size: var(--size-large, #{$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}
      --message-background-color: var(--#{$name}-light, #{$color-light})
      --message-header-background-color: var(--#{$name}, #{$color})
      --message-header-color: var(--#{$name}-invert, #{$color-invert})
      --message-body-border-color: var(--#{$name}, #{$color})
      --message-body-color: var(--#{$name}-dark, #{$color-dark})

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

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