@use "system/breakpoints";
@use "system/colors";
@use "system/spacing";
@use "system/typography";
@use "system/icons";

.ods-status-message {
  @extend %ods-padding-horizontal-4, %ods-padding-vertical-4;
  @extend %ods-text--size-kilo, %ods-text--size-juliett-breakpoint-large, %ods-text--weight-medium;

  background-color: colors.$gray-light;
  border-left: 0.375rem solid colors.$grayscale-30;
  word-break: break-word;

  &__heading {
    @extend %ods-text--weight-medium;

    display: flex;
  }

  &__content {
    @extend %ods-text--weight-light;
    @extend %ods-margin-top-4;
  }

  &__date {
    @extend %ods-text--size-lima;
    @extend %ods-text--weight-light;
    @extend %ods-margin-top-6;
  }

  &--success {
    background-color: colors.$green-30;
    border-left: 0.375rem solid colors.$green;
  }

  &--info {
    background-color: colors.$blue-60;
    border-left: 0.375rem solid colors.$blue;
  }

  &--warning {
    background-color: colors.$yellow-50;
    border-left: 0.375rem solid colors.$yellow;
  }

  &--danger {
    background-color: colors.$red-30;
    border-left: 0.375rem solid colors.$red;
  }

  &__icon {
    @extend %ods-icon--size-kilo, %ods-icon--size-juliett-breakpoint-large;
    @extend %ods-padding-right-2;

    line-height: 1.5rem;
    align-self: baseline;

    @include breakpoints.large {
      line-height: 1.75rem;
    }
  }
}