@import '_functions';

/* .smart-alert */
.smart-alert {
  position: relative;
  padding: .75rem 1.25rem;
  margin-bottom: 1rem;
  border: var(--smart-item-border-width) solid var(--smart-background-color);
  border-radius: var(--smart-item-border-radius);
  color: var(--smart-background-color);
  background-color: var(--smart-background);

  // ======== Alert Colors ========
  @each $value in $main-colors-list {
    &.smart-alert-#{$value} {
      color: var(--smart-#{$value}-color);
      background-color: #{'rgba(var(--smart-#{$value}-rgb),
      .7)'};
border-color: #{'rgba(var(--smart-#{$value}-rgb),
      1)'};

    }
  }
}

@import 'rtl/_alert';