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

$message-header-background-color: $text !default;
$message-header-color: $text-invert !default;
$message-header-padding: 0.5em 0.75em !default;
$message-header-radius: $radius !default;

$message-body-border: 1px solid $border !default;
$message-body-color: $text !default;
$message-body-padding: 1em 1.25em !default;
$message-body-radius: $radius !default;

$message-body-pre-background-color: $white !default;
$message-body-pre-code-background-color: transparent !default;

.sgds {
  &-message {
    @include block;

    background-color: $message-background-color;
    border-radius: $message-radius;
    font-size: $size-normal;

    strong {
      color: currentColor;
    }

    a:not(.sgds-button):not(.sgds-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
    @each $name, $pair in $colors {
      $color: nth($pair, 1);
      $color-invert: nth($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);

        .sgds-message-header {
          background-color: $color;
          color: $color-invert;
        }

        .sgds-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;
    }

    & + .sgds-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-color: $message-body-pre-background-color;
    }

    pre code {
      background-color: $message-body-pre-code-background-color;
    }
  }
}