@use '../../styles/mixins' as *;
@use '../../styles/variables' as *;

.ui-alert {
  $self: &;

  --icon-color: var(--alert-icon-color);

  display: flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: 12px;
  background-color: var(--alert-background);
  text-align: left;

  &__title {
    @include txt-i-b('alert-title');

    grid-area: title;
    margin-bottom: var(--alert-title-margin, 4px);
    margin-top: 2px;
  }

  &__text {
    @include txt-i-m('alert-text');

    grid-area: text;
    color: $clr-black;

    #{$self}.has-title & {
      color: var(--alert-text-color, $clr-grey-500);
    }

    #{$self}.has-action & {
      margin-bottom: 4px;
    }
  }

  &__icon {
    grid-area: icon;
    align-self: center;
    color: var(--icon-color);
    padding: 8px;

    #{$self}.has-title &,
    #{$self}.has-action & {
      align-self: flex-start
    }
  }

  &__content{
    flex: 1;
  }

  @include element-variant('alert', 'large', (
          'padding': 16px,
  ));

  @include element-variant('alert', 'neutral', (
          'icon-color': $clr-grey-500,
          'background': $clr-grey-200,
  ));

  @include element-variant('alert', 'positive', (
          'icon-color': $clr-green-500,
          'background': $clr-green-100,
  ));

  @include element-variant('alert', 'warning', (
          'icon-color': $clr-warn-500,
          'background': $clr-warn-100,
  ));

  @include element-variant('alert', 'negative', (
          'icon-color': $clr-red-500,
          'background': $clr-red-100,
  ));

  @include element-variant('alert', 'marketing', (
          'icon-color': $clr-market-500,
          'background': $clr-market-100,
  ));
}