@use "config";
@use "mixins";
@use "variables";
@use "sass:color";
@use "sass:math";
@use "sass:map";

.message {
  $self: &;
  --message-background: var(--lighter);
  --message-border: var(--base);
  --message-color: var(--dark);

  background-color: var(--message-background);
  border-left: thick solid var(--message-border);
  color: var(--message-color);
  margin: map.get(variables.$spacers, 2) 0;
  padding: map.get(variables.$spacers, 2);

  // button close needs to be an independant concept to be placed
  // anywhere

  &:before {
    display: block;
    font-size: 80%;
    font-weight: bold;
    margin-bottom: map.get(variables.$spacers, 3);
    text-transform: uppercase;
  }

  &__close {
    position: absolute;
    top: map.get(variables.$spacers, 2);
    right: map.get(variables.$spacers, 2);
  }

  &[data-header="none"] {
    &:before {
      display: none;
    }
  }

  > p {
    margin-bottom: 0;

    + p {
      margin: map.get(variables.$spacers, 2) 0 0;
    }
  }
  // ----------

  @each $name, $color in variables.$message-colors {
    &--#{$name} {
      --message-background: #{$color};
      --message-border: #{color.adjust(
          $color,
          $lightness: math.percentage(-(config.$hue-threshold * 5))
        )};
      --message-color: #{color.adjust(
          $color,
          $lightness: math.percentage(-(config.$hue-threshold * 6))
        )};

      &::before {
        content: $name;
      }

      &[data-header]:before {
        content: attr(data-header);
      }
    }
  }
}