@import "../base/classes.sass"
@import "../utilities/functions.sass"
@import "../utilities/variables.sass"

.message-body
  border: 1px solid $border
  border-radius: $radius
  padding: 12px 15px
  strong
    color: inherit

.message-header
  background-color: $text
  border-radius: $radius $radius 0 0
  color: $text-invert
  padding: 7px 10px
  strong
    color: inherit
  & + .message-body
    border-radius: 0 0 $radius $radius
    border-top: none

.message
  @extend .block
  background-color: $background
  border-radius: $radius
  // Colors
  @each $name, $pair in $colors
    $color: nth($pair, 1)
    $color-invert: nth($pair, 2)
    $lightning: max((100% - lightness($color)) - 4%, 0%)
    $darkness: max(lightness($color) - 10%, lightness($color))
    &.is-#{$name}
      background-color: lighten($color, $lightning)
      .message-header
        background-color: $color
        color: $color-invert
      .message-body
        border-color: $color
        @if (colorLuminance($color) > 0.8)
          color: desaturate(lighten(darken($color, 100%), 40%), 40%)
        @else
          color: desaturate(lighten(darken($color, 100%), 50%), 30%)