@use "../../../styles/tools/generate";
@use "./config";
@use "./mixins";
@use "../../../styles/tokens/color";

@layer components {
  .alert {
    @include mixins.alert-base();
    @include mixins.alert-variants();

    &__icon {
      @include mixins.alert-icon();
    }

    &__content {
      @include mixins.alert-content();
    }

    &__close {
      @include mixins.alert-close();
    }

    &__title {
      @include mixins.alert-title();
    }

    &__title + .buttons,
    &__title + .btn {
      @include mixins.buttons-after-title();
    }

    &--full-width {
      max-width: 100%;
    }
  }
}