@use "src/styles/variables" as *;

.vm-alert {
  position: relative;
  display: grid;
  grid-template-columns: 20px 1fr;
  align-items: center;
  gap: $padding-small;
  padding: $padding-global;
  border-radius: $border-radius-medium;
  box-shadow: $box-shadow;
  font-size: $font-size;
  font-weight: normal;
  color: $color-text;
  line-height: 1.5;
  opacity: 0.8;

  &_mobile {
    align-items: flex-start;
    border-radius: 0;
  }

  &__icon,
  &__content {
    position: relative;
    z-index: 2;
  }

  &__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    min-height: 24px;
    filter: brightness(0.6);
  }

  &__content {
    white-space: pre-line;
    text-wrap: balance;
    overflow-wrap: anywhere;
    filter: brightness(0.6);
  }

  &_success {
    color: $color-success;
    background-color: $color-background-success;
  }

  &_error {
    color: $color-error;
    background-color: $color-background-error;
  }

  &_info {
    color: $color-info;
    background-color: $color-background-info;
  }

  &_warning {
    color: $color-warning;
    background-color: $color-background-warning;
  }

  &_dark &__content, &_dark &__icon {
    filter: none;
  }

  &_dark:is(&_success) {
    border: 0.5px solid $color-success;
  }

  &_dark:is(&_error) {
    border: 0.5px solid $color-error;
  }

  &_dark:is(&_info) {
    border: 0.5px solid $color-info;
  }

  &_dark:is(&_warning) {
    border: 0.5px solid $color-warning;
  }
}
