.alert {
    --rocket-ui-alert-icon-color: var(--rocket-color-error-300);
    --rocket-ui-alert-close-color: var(--rocket-color-grey-600);
    --rocket-ui-alert-background-color: var(--rocket-color-error-100);
    --rocket-ui-alert-title-color: var(--rocket-color-grey-700);
    --rocket-ui-alert-text-color: var(--rocket-color-primary-700);
    --rocket-ui-alert-action-color: var(--rocket-color-primary-400);
    --rocket-ui-alert-action-underline-color: var(--rocket-color-primary-400);
    --rocket-ui-alert-action-second-background-color: var(
        --rocket-color-white-base
    );
    --rocket-ui-alert-action-second-text-color: var(--rocket-color-primary-400);

    $rte-message-before-icon-color: #0354A6;
    $this: &;

    position: relative;
    display: flex;
    align-items: start;
    width: 100%;
    padding: $rocket-spacing-size-3 $rocket-spacing-size-5;
    column-gap: 0.75rem;
    background: var(--rocket-ui-alert-background-color);
    border-radius: var(--rocket-alert-border-radius);

    &::before {
        @include size(1.5rem);

        position: absolute;
        left: 1.25rem;
        display: block;
    }

    &__icon {
        @include size(1.5rem);

        path {
            stroke: var(--rocket-ui-alert-icon-color);
        }
    }

    &__button-close {
        display: flex;
        padding: 0;
        border: 0;
        border-radius: var(--rocket-button-icon-border-radius);
        outline: none;
        cursor: pointer;

        svg {
            @include size(1.5rem);
        }

        path {
            stroke: var(--rocket-ui-alert-close-color);
        }

        @include event {
            svg {
                opacity: 0.6;
            }
        }

        &:focus {
            @include theme-focus-ring(false);
        }
    }

    &__content {
        flex-grow: 1;
    }

    &__title {
        margin: 0;
        color: var(--rocket-ui-alert-title-color);
        font-weight: 600;
        font-size: 1rem;
        line-height: (24 / 16);
    }

    &__text {
        p, li {
            @extend %base-styles-text;
        }
    }

    &__actions {
        width: 100%;
        margin-top: 0.375rem;
    }

    &__action {
        @extend #{$this}__title;

        position: relative;
        width: max-content;
        padding: 0;
        color: var(--rocket-ui-alert-action-color);
        font-weight: 500;
        text-decoration: none;
        background: inherit;
        border: none;
        border-radius: inherit;

        &::after {
            position: absolute;
            bottom: 0;
            display: block;
            width: 100%;
            height: 1px;
            background: var(--rocket-ui-alert-action-underline-color);
            content: '';
        }

        @include transition;

        @include event {
            --rocket-ui-button-text-color-hover: var(--rocket-color-primary-400);

            background: inherit;
            opacity: 0.6;
        }
    }

    &--message {
        --rocket-ui-alert-background-color: var(--rocket-color-info-100);

        .rte {
            & > *:first-child {
                color: var(--rocket-color-grey-700);
                font-weight: 600;
                font-size: 1rem;
                line-height: 1.5;
            }

            a {
                color: inherit;
            }
        }
    }

    &--message-icon {
        @extend .alert--message;

        padding: .75rem 1.25rem .75rem 3.5rem;

        &::before {
            background-image: inline-svg('<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 96 960 960" width="24"><path d="M453 776h60V536h-60v240Zm26.982-314q14.018 0 23.518-9.2T513 430q0-14.45-9.482-24.225-9.483-9.775-23.5-9.775-14.018 0-23.518 9.775T447 430q0 13.6 9.482 22.8 9.483 9.2 23.5 9.2Zm.284 514q-82.734 0-155.5-31.5t-127.266-86q-54.5-54.5-86-127.341Q80 658.319 80 575.5q0-82.819 31.5-155.659Q143 347 197.5 293t127.341-85.5Q397.681 176 480.5 176q82.819 0 155.659 31.5Q709 239 763 293t85.5 127Q880 493 880 575.734q0 82.734-31.5 155.5T763 858.316q-54 54.316-127 86Q563 976 480.266 976Zm.234-60Q622 916 721 816.5t99-241Q820 434 721.188 335 622.375 236 480 236q-141 0-240.5 98.812Q140 433.625 140 576q0 141 99.5 240.5t241 99.5Zm-.5-340Z" fill="#{$rte-message-before-icon-color}"/></svg>');
            content: '';
        }
    }

    &--message-notice {
        @extend .alert--message;

        --rocket-ui-alert-background-color: var(--rocket-color-grey-200);
    }

    &--message-notice-icon {
        $rte-message-before-icon-color: #667085;

        @extend .alert--message-notice;
        @extend .alert--message-icon;

        &::before {
            background-image: inline-svg('<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 96 960 960" width="24"><path d="M480 976q-27 0-47.5-13T406 927h-14q-24 0-42-18t-18-42V724q-66-43-104-110t-38-148q0-121 84.5-205.5T480 176q121 0 205.5 84.5T770 466q0 81-38 148T628 724v143q0 24-18 42t-42 18h-14q-6 23-26.5 36T480 976Zm-88-109h176v-44H392v44Zm0-84h176v-40H392v40Zm-9-100h74V546l-77-77q-6-6-6-15t7-16q7-7 15.727-7 8.728 0 15.273 7l68 69 69-69q6-6 15-6t16 7q7 7 7 15t-7 15l-77 77v137h74q60-28 96.5-87T710 466q0-97-66.5-163.5T480 236q-97 0-163.5 66.5T250 466q0 71 36.5 130t96.5 87Zm97-176Zm0-48Z" fill="#{$rte-message-before-icon-color}"/></svg>');
        }
    }

    &--message-error {
        @extend .alert--message;

        --rocket-ui-alert-background-color: var(--rocket-color-error-100);
    }

    &--message-error-icon {
        $rte-message-before-icon-color: #912018;

        @extend .alert--error;
        @extend .alert--message-icon;

        &::before {
            background-image: inline-svg('<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 96 960 960" width="24"><path d="m330 768 150-150 150 150 42-42-150-150 150-150-42-42-150 150-150-150-42 42 150 150-150 150 42 42Zm150 208q-82 0-155-31.5t-127.5-86Q143 804 111.5 731T80 576q0-83 31.5-156t86-127Q252 239 325 207.5T480 176q83 0 156 31.5T763 293q54 54 85.5 127T880 576q0 82-31.5 155T763 858.5q-54 54.5-127 86T480 976Zm0-60q142 0 241-99.5T820 576q0-142-99-241t-241-99q-141 0-240.5 99T140 576q0 141 99.5 240.5T480 916Zm0-340Z" fill="#{$rte-message-before-icon-color}"/></svg>');
        }
    }

    &--message-success {
        @extend .alert--message;

        --rocket-ui-alert-background-color: var(--rocket-color-success-100);
    }

    &--message-success-icon {
        $rte-message-before-icon-color: #039855;

        @extend .alert--message-success;
        @extend .alert--message-icon;

        &::before {
            background-image: inline-svg('<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 96 960 960" width="24"><path d="m421 758 283-283-46-45-237 237-120-120-45 45 165 166Zm59 218q-82 0-155-31.5t-127.5-86Q143 804 111.5 731T80 576q0-83 31.5-156t86-127Q252 239 325 207.5T480 176q83 0 156 31.5T763 293q54 54 85.5 127T880 576q0 82-31.5 155T763 858.5q-54 54.5-127 86T480 976Zm0-60q142 0 241-99.5T820 576q0-142-99-241t-241-99q-141 0-240.5 99T140 576q0 141 99.5 240.5T480 916Zm0-340Z" fill="#{$rte-message-before-icon-color}"/></svg>');
        }
    }

    &--message-warning {
        @extend .alert--message;

        --rocket-ui-alert-background-color: var(--rocket-color-warning-100);
    }

    &--message-warning-icon {
        $rte-message-before-icon-color: #DC6803;

        @extend .alert--message-warning;
        @extend .alert--message-icon;

        &::before {
            background-image: inline-svg('<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 96 960 960" width="24"><path d="m40 936 440-760 440 760H40Zm104-60h672L480 296 144 876Zm340.175-57q12.825 0 21.325-8.675 8.5-8.676 8.5-21.5 0-12.825-8.675-21.325-8.676-8.5-21.5-8.5-12.825 0-21.325 8.675-8.5 8.676-8.5 21.5 0 12.825 8.675 21.325 8.676 8.5 21.5 8.5ZM454 708h60V484h-60v224Zm26-122Z" fill="#{$rte-message-before-icon-color}"/></svg>');
        }
    }

    &--error {
        --rocket-ui-alert-icon-color: var(--rocket-color-error-300);
        --rocket-ui-alert-background-color: var(--rocket-color-error-100);
    }

    &--info {
        --rocket-ui-alert-icon-color: var(--rocket-color-info-300);
        --rocket-ui-alert-background-color: var(--rocket-color-info-100);
    }

    &--success {
        --rocket-ui-alert-icon-color: var(--rocket-color-success-300);
        --rocket-ui-alert-background-color: var(--rocket-color-success-100);
    }

    &--warning {
        --rocket-ui-alert-icon-color: var(--rocket-color-warning-300);
        --rocket-ui-alert-background-color: var(--rocket-color-warning-100);
    }

    &--grey {
        --rocket-ui-alert-icon-color: var(--rocket-color-grey-600);
        --rocket-ui-alert-background-color: var(--rocket-color-grey-200);
    }
}