@use "../../global-modules.scss" as *;

/**
 * Overrides usa-alert's default icon behavior (css-embedded
 * icons placed into dom via :before) in favor of explicit
 * icon placed using same rules. Adds "tip" type styling.
 * Adds automatic bolding to heading (when element is div
 * instead of h1-h6). Adds min-height to body for empty
 * body scenario.
 */
.Alert {
    &:global {
        &.usa-alert {
            .usa-alert {
                &__body {
                    min-height: units(3);

                    &:before {
                        all: unset;
                    }

                    & > .usa-icon {
                        @include u-width(4);
                        height: (2 * units($theme-alert-padding-y)) + units(3);
                        left: $alert-icon-optical-padding;
                        position: absolute;
                        top: 0;
                    }
                }
            }

            div.usa-alert__heading {
                font-weight: bold;
            }

            &--no-icon .usa-alert__body {
                padding-left: 0;
            }

            &--slim .usa-alert__body > .usa-icon {
                @include u-height(5);
                @include u-width(3);
            }

            &--tip {
                /* Tip type style */
                @include u-border("primary-lighter");
                @include u-border(1px);
                @include u-border("solid");
                @include u-radius("md");

                .usa-alert__heading {
                    font-size: size("body", "sm");
                }
            }
        }
    }
}
