@import "~@kaizen/design-tokens/sass/spacing";
@import "~@kaizen/design-tokens/sass/color";
@import "~@kaizen/design-tokens/sass/border";
@import "../../variables";

$message-icon-size: 1.25rem;
$validation-message-padding: 0.5625rem;

.message {
  display: flex;
  position: relative;
  align-items: center;
  gap: $spacing-xs;
}

.default {
  color: $dt-color-form-text-color-label;

  &.reversed {
    color: $dt-color-form-text-color-label-reversed;
  }
}

.error,
.caution {
  border-radius: $border-solid-border-radius;
  padding: $validation-message-padding;
  color: $color-purple-800;
}

.error {
  background: $color-red-100;
  opacity: 100%;

  &.reversed {
    background: $color-red-300;
  }
}

.caution {
  background: $color-yellow-100;
  opacity: 100%;

  &.reversed {
    background: $color-yellow-400;
  }
}

.positionBottom {
  margin-top: $spacing-xs;
}

.positionTop {
  margin-bottom: $spacing-xs;
}

.warningIcon {
  display: inline-flex;
  width: $message-icon-size;
  align-self: flex-start;

  .error & {
    color: $color-red-500;
  }

  .caution & {
    color: $color-yellow-500;
  }

  .reversed & {
    color: $color-purple-800;
  }
}