$alert-colors: error, warn, success, information;

.Alert {
    --alert-warn: var(--glyphs-warning, #d17300);
    --alert-information: var(--glyphs-info, #0563c2);
    --alert-error: var(--glyphs-error, #b82214);
    --alert-success: var(--glyphs-success, #418e29);
    --alert-warn-border: var(--warning-300, #ffc680);
    --alert-information-border: var(--info-300, #7abdff);
    --alert-error-border: var(--error-300, #f98f86);
    --alert-success-border: var(--success-300, #9de189);
    --alert-warn-background: var(--warning-50, #fff8f0);
    --alert-information-background: var(--info-50, #f0f7ff);
    --alert-error-background: var(--error-50, #fef2f0);
    --alert-success-background: var(--success-50, #f1fbef);

    padding: var(--padding-medium-small);
    flex-direction: row;
    width: 100%;
    border-radius: var(--radius-medium, 8px);

    &::before {
        content: '';
        border-radius: 2px;
        min-width: 4px;
    }

    &-body {
        display: flex;
        flex-direction: column;
        padding: var(--padding-medium-small, 8px) var(--padding-small, 4px)
            var(--padding-medium-small, 8px) var(--padding-medium-large, 12px);
        gap: var(--padding-medium-large);
    }

    &-content {
        display: flex;
        flex-grow: 1;
        align-items: center;
        padding: 0;
        gap: var(--padding-medium-large);
    }

    &-elements {
        gap: var(--padding-extra-small);
        display: flex;
        flex-direction: column;
    }

    &-icons {
        display: flex;
        align-items: center;
    }

    &-actions {
        display: flex;
        margin-left: 36px;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    &-expandable {
        .Alert-body {
            gap: var(--padding-extra-small);
        }

        .Alert-content {
            align-items: flex-start;
        }

        .ExpandableBody {
            padding-left: 36px;

            .Alert-text {
                margin-bottom: var(--padding-medium-large);
            }

            .Alert-actions {
                margin-left: 0;
            }
        }
    }

    &-title {
        @include text-body-bold;

        display: flex;
        align-items: center;
        color: var(--text-primary, #22262a);
        margin: 0;
    }

    @each $color in $alert-colors {
        &-#{$color} {
            border: 1px solid var(--alert-#{$color}-border) !important;
            background-color: var(--alert-#{$color}-background);

            &::before {
                background-color: var(--alert-#{$color});
            }

            .GlyphIcon {
                color: var(--alert-#{$color});
            }
        }
    }

    &-controls {
        display: flex;
        margin-left: auto;
        gap: var(--padding-small, 4px);
    }

    &-expandable &-title {
        line-height: 24px;
    }
}

.AlertContainer {
    width: 100%;

    &-body {
        max-height: 226px;
        overflow: auto;
        display: grid;
        grid-column-gap: 10px;
        grid-row-gap: 10px;

        &.isWrapping {
            grid-template-columns: repeat(4, 1fr);
            padding-right: 4px;
            overflow: scroll;
        }

        &:not(.isWrapping) {
            grid-auto-flow: column;
        }
    }

    .SuiteSection-header-content {
        gap: 5px;
    }

    .Alert {
        @include text-body-small;

        &-body {
            padding: 4px 4px 4px 8px;
        }

        &-content {
            gap: var(--padding-medium-small);
        }

        &-button {
            font-size: 10px;
            line-height: 15px;
            padding: 4.5px 10px;
            margin: 10px 0 0;
        }

        &-title {
            @include text-body-small-bold;
        }

        &-error {
            order: 0;
        }

        &-warn {
            order: 1;
        }

        &-information {
            order: 2;
        }

        &-success {
            order: 3;
        }
    }
}