.aw-alert {
    display: flex;
    align-items: flex-start;
    gap: 1rem;

    padding: 1rem;
    border-radius: 0.625rem;
    background: var(--aw-alert-color);

    &__icon {
        color: var(--aw-alert-on-color);
    }

    /* .aw-description {
        color: var(--c-on-surface);

        a {
            color: var(--c-on-surface);
        }
    } */

    &__title {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        margin-inline-end: auto;

        color: var(--c-on-surface);
        font-size: 0.875rem;
        line-height: 1.2857;

        &-text {
            font-weight: 700;
            line-height: 1.1428;
        }
    }

    &__buttons {
        display: flex;
        gap: 1rem;

        align-items: center;

        font-size: 0.875rem;
        line-height: 1.125rem;
        font-weight: 700;

        :where(:is(a, button):not(.aw-button)) {
            --btn-color: var(--aw-alert-on-color);
            color: var(--aw-alert-on-color);
            text-decoration: underline;

            &:hover {
                color: var(--aw-alert-on-color);
                opacity: 0.7;
            }
        }

        a,
        button {
            font-size: 0.875rem;
            line-height: 1.125rem;
            font-weight: 700;
            white-space: nowrap;
        }
    }

    &__close {
        display: flex;
        align-items: flex-start;

        .aw-button--theme-icon {
            --icon-color: var(--aw-alert-on-color);
            opacity: 1;

            &:hover,
            &:focus-visible {
                opacity: 0.7;
            }
        }

        /* justify-content: flex-end;
        font-size: 0.875rem;
        line-height: 1.125rem;
        font-weight: 700;
        color: var(--aw-alert-on-color);

        a,
        button {
            font-size: 0.875rem;
            line-height: 1.125rem;
            font-weight: 700;
            white-space: nowrap;
        } */
    }
}