@use "scss/colors";
@use "scss/variables";
@use "scss/z-indices";
@use "scss/mixins";

$message-icon-size: 22px;

@mixin type($name, $color, $background) {
  &.#{$name} {
    --message-color: #{$color};

    background-color: $background;
    border-color: var(--message-color);

    .messageIcon {
      color: var(--message-color);
    }

    .childrenContainer {
      border: 1px solid $background;
    }
  }
}

.messageContainer {
  padding: variables.$spacing-sm;
  border-radius: variables.$border-radius-md;

  @include type("info", colors.$blue-400, colors.$blue-50);
  @include type("warning", colors.$yellow-500, colors.$yellow-50);
  @include type("success", colors.$green-200, colors.$green-50);
  @include type("error", colors.$red-300, colors.$red-50);
}

@mixin children-type($name, $color, $background) {
  @include type($name, $color, $background);
  &.#{$name} {
    color: colors.$dark-blue-900;
    border: variables.$spacing-sm solid $background;
    padding: variables.$spacing-sm;
    background: colors.$foreground;
  }
}

.childrenContainer {
  border-radius: variables.$border-radius-md;
  font-size: variables.$font-size-lg;

  @include children-type("info", colors.$blue-400, colors.$blue-50);
  @include children-type("warning", colors.$yellow-500, colors.$yellow-50);
  @include children-type("success", colors.$green-200, colors.$green-50);
  @include children-type("error", colors.$red-300, colors.$red-50);
}

.iconContainer {
  padding: 4px;
}

.messageIcon {
  width: $message-icon-size;
  height: $message-icon-size;
  border-radius: 50%;
  padding: 1px;
}

.textContainer {
  align-self: center;
  flex-grow: 1;
  overflow-wrap: anywhere;
  padding: 2px;
}

.text {
  line-height: 1.8;
  font-size: variables.$font-size-lg;
  text-align: left;
  font-weight: 500;
}

.secondaryText {
  line-height: 1.3;
  font-size: variables.$font-size-lg;
  text-align: left;
}

.alignRightColumn {
  align-self: stretch; // flex equivalent of `height: 100%`
  max-height: calc(32px + 9px); // 32px for the button's height, allow up to 9px "padding" on the top
}
