@use '../utilities/functions' as *;

.alert {
  color: text(body);
  background-color: bg(surface, neutral);
  padding: fixed(16);
  gap: fixed(16);
  border-radius: radius(lg);

  &__content,
  &__actions {
    display: flex;
  }

  &__content {
    gap: fixed(16);
  }

  &__text {
    width: 100%;

    p {
      &:first-child {
        margin-bottom: fluid(2);
      }

      &:first-of-type {
        font-weight: weight(bold) !important;
      }
    }
  }

  &__actions {
    margin-top: fixed(24);
    justify-content: flex-end;

    button:first-child {
      margin-right: fixed(16);
    }
  }

  $border-color: caution, danger, info, success;

  @each $key in $border-color {
    &.alert--#{$key} {
      border: width(2) stroke(#{$key}) solid;

      & i.alert__icon {
        color: icon(#{$key});
      }
    }
  }
}