@use "../alert";
@use "../button";
@use "../icon";
@use "../../di";
@use "../../variables/units";

.alert {
  @include alert.root();
  @include alert.children();

  .dso-close {
    @include button.element();

    $inset-unit: units.$u1 * 0.5 - alert.$border-size;

    position: absolute;
    inset-block-start: $inset-unit;
    inset-inline-end: $inset-unit;

    block-size: units.$u4;
    inline-size: units.$u4;

    padding: 0;

    background-color: transparent;

    border: 0;
    text-align: center;

    &::before {
      @include di.base("cross-zwart", icon.$size, middle);

      content: "";
      display: inline-block;
    }
  }

  &:not(.dso-compact)::before {
    @include alert.icon-position();

    content: "";
  }

  &.alert-success {
    &:not(.dso-compact)::before {
      @include di.base("status-success", alert.$icon-size);
    }
  }

  &.alert-error {
    &:not(.dso-compact)::before {
      @include di.base("status-error", alert.$icon-size);
    }
  }

  &.alert-warning {
    &:not(.dso-compact)::before {
      @include di.base("status-warning", alert.$icon-size);
    }
  }

  &.alert-info {
    &:not(.dso-compact)::before {
      @include di.base("status-info-solid", alert.$icon-size);
    }
  }
}