.alert {
    $gap: 15px;
    $padding: 15px;
    position: relative;
    display: flex;
    column-gap: $gap;
    align-items: center;
    width: 100%;
    min-height: 50px;
    max-width: 100%;
    word-break: break-word;
    margin: 0 0 var(--baseSpacing);
    border-radius: var(--baseRadius);
    padding: ($padding - 3) $padding;
    background: var(--baseAlt1Color);
    color: var(--txtAltColor);
    .content {
        flex-grow: 1;
    }
    .icon, .close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-grow: 0;
        flex-shrink: 0;
        text-align: center;
    }
    .icon {
        align-self: stretch;
        font-size: 1.2em;
        padding-right: $gap;
        font-weight: normal;
        border-right: 1px solid rgba(#000, 0.05);
        color: var(--txtHintColor);
    }
    .close {
        $size: 30px;
        display: inline-flex;
        margin-right: -5px;
        width: $size;
        height: $size;
        outline: 0;
        cursor: pointer;
        text-align: center;
        font-size: var(--smFontSize);
        line-height: $size;
        border-radius: $size;
        text-decoration: none;
        color: inherit;
        opacity: 0.5;
        transition: opacity var(--baseAnimationSpeed),
                    background var(--baseAnimationSpeed);
        &:hover,
        &:focus {
            opacity: 1;
            background: rgba(#fff, 0.2);
        }
        &:active {
            opacity: 1;
            background: rgba(#fff, 0.3);
            transition-duration: var(--activeAnimationSpeed);
        }
    }

    code,
    hr {
        background: rgba(#000, 0.1);
    }

    // styles
    &.alert-info {
        background: var(--infoAltColor);
        .icon {
            color: var(--infoColor);
        }
    }
    &.alert-warning {
        background: var(--warningAltColor);
        .icon {
            color: var(--warningColor);
        }
    }
    &.alert-success {
        background: var(--successAltColor);
        .icon {
            color: var(--successColor);
        }
    }
    &.alert-danger {
        background: var(--dangerAltColor);
        .icon {
            color: var(--dangerColor);
        }
    }
}

.toasts-wrapper {
    position: fixed;
    z-index: 999999;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0 var(--smSpacing);
    width: auto;
    display: block;
    text-align: center;
    pointer-events: none;
    .alert {
        text-align: left;
        pointer-events: auto;
        width: var(--smWrapperWidth);
        margin: var(--baseSpacing) auto;
        @include shadowize();
    }
}
body:not(.overlay-active) {
    .app-sidebar ~ .app-body .toasts-wrapper {
        left: var(--appSidebarWidth);
    }
    .app-sidebar ~ .app-body .page-sidebar ~ .toasts-wrapper {
        left: calc(var(--appSidebarWidth) + var(--pageSidebarWidth));
    }
}