:host {
    position: fixed;
    bottom: 48px;
    left: 80px;
    z-index: 1;
}

.notify-card {
    position: absolute;
    bottom: 0;
    box-sizing: border-box;
    appearance: none;
    border: none;
    background-color: var(--ds-surface-overlay, #FFFFFF);
    --ds-elevation-surface-current: var(--ds-surface-overlay, #FFFFFF);
    padding: var(--ds-space-200, 16px);
    box-shadow: var(--ds-shadow-overlay, 0px 8px 12px #091e423f, 0px 0px 1px #091e424f);
    border-radius: var(--ds-border-radius-100, 3px);
    overflow: hidden;
    z-index: 600;
    width: 100%;
    transition: background-color 200ms ease 0s;
    width: 420px;
    display: grid;
    grid-template-columns: min-content 1fr min-content;
    gap: 20px;
    animation-duration: 0ms;

    &:not(.active) {
        transition: transform 400ms ease-in-out 0s;
        transform: translateX(0px) translateY(100%) translateY(16px);
        z-index: 4;
    }

    &.active {
        transform: translate(0px, 0px);
        transition: none 0s ease 0s;
        z-index: 5;
    }

    &__body {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    &__title {
        display: flex;
        align-items: center;
        flex: 1 0 24px;
        font-weight: 600;
    }

    &__actions {
        display: flex;
        align-items: baseline;
        gap: 8px;
        flex-wrap: wrap;

        &__action-item {
            cursor: pointer;
            color: var(--color-href);
            flex-flow: wrap;
            // del
            // font-weight: 500;
            font-weight: 600;

            max-width: 305px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;


            &:not(.success):hover {
                text-decoration: underline;
            }

            &.success {
                color: #36B37E;
            }
        }
    }

    &__close-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;

        app-cmf-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }
    }
}