@import url("../colors.css");
@import url("../config.css");

:root {
    --nnotify-success-text-color: var(--c-zinc-700);
    --nnotify-warning-text-color: var(--c-zinc-700);
    --nnotify-error-text-color: var(--c-zinc-700);
    --nnotify-info-text-color: var(--c-zinc-700);
}

.nnotify-notifications-container {
    display: table;
    position: fixed;
    right: 10px;
    top: auto;
    z-index: 10000;
    width: 420px;
    bottom: 20px;
    padding: 0px;
}

    .nnotify-notifications-container > div {
        margin-top: 10px;
        height: auto;
        border-radius: 4px;
        position: relative;
    }

        .nnotify-notifications-container > div:first-child {
            margin-top: 0px;
        }

        .nnotify-notifications-container > div > div {
            display: inline-block;
            vertical-align: middle;
            margin: 0px;
        }

            .nnotify-notifications-container > div > div:first-child {
                width: 15px;
                height: auto;
                position: absolute;
                height: 100%;
                border-top-left-radius: 4px;
                border-bottom-left-radius: 4px;
            }

            .nnotify-notifications-container > div > div:nth-child(2) {
                width: calc(100% - 66px);
                height: 100%;
                vertical-align: middle;
                line-break: strict;
                padding-top: 10px;
                padding-bottom: 10px;
                margin-left: 25px;
            }

            .nnotify-notifications-container > div > div:last-child {
                width: 35px;
            }

                .nnotify-notifications-container > div > div:last-child > button {
                    display: table;
                    margin: auto;
                    width: 25px;
                    height: 25px;
                    background-color: transparent;
                    border: 0;
                    cursor: pointer;
                    outline: none;
                    border: 1px solid rgb(138, 138, 138);
                    border-radius: 100px;
                    text-align: center;
                    word-spacing: 0px;
                    color: rgb(138, 138, 138);
                }

                    .nnotify-notifications-container > div > div:last-child > button:hover {
                        border: 1px solid rgb(121, 121, 121);
                        color: rgb(108, 108, 108);
                        background-color: rgb(229, 229, 229);
                    }

                    .nnotify-notifications-container > div > div:last-child > button > span {
                        padding: 0px;
                        margin: 0px;
                        word-spacing: 0px;
                        font-size: 11px;
                        line-height: 25px;
                        margin: 0;
                    }

                    .nnotify-notifications-container > div > div:last-child > button:active {
                        outline: none;
                    }

            .nnotify-notifications-container > div > div:last-child {
            }

            .nnotify-notifications-container > div > div > label {
                white-space: normal;
                font-weight: 500;
                line-break: anywhere;
            }

    .nnotify-notifications-container .nnotify-success-notification {
        background-color: rgb(168, 241,198);
        color: var(--nnotify-success-text-color);
    }

    .nnotify-notifications-container .nnotify-error-notification {
        background-color: rgb(246, 167,163);
        color: var(--nnotify-warning-text-color);
    }

    .nnotify-notifications-container .nnotify-warning-notification {
        background-color: rgb(255, 211,138);
        color: var(--nnotify-error-text-color);
    }

    .nnotify-notifications-container .nnotify-info-notification {
        background-color: rgb(235, 235,235);
        color: var(--nnotify-info-text-color);
    }

    .nnotify-notifications-container > .nnotify-success-notification > div:first-child {
        background-color: rgb(25, 131,69);
    }

    .nnotify-notifications-container > .nnotify-error-notification > div:first-child {
        background-color: rgb(142, 19,12);
    }

    .nnotify-notifications-container > .nnotify-warning-notification > div:first-child {
        background-color: rgb(140, 85,2);
    }

    .nnotify-notifications-container > .nnotify-info-notification > div:first-child {
        background-color: rgb(108, 108,108);
    }

@media screen and (max-width: 48em) {
    .nnotify-notifications-container {
        display: table;
        position: fixed;
        right: 10px;
        top: auto;
        z-index: 10000;
        width: 100%;
        bottom: 20px;
        padding: 0px;
    }

        .nnotify-notifications-container > div {
            margin-left: 20px;
        }

            .nnotify-notifications-container > div > div:first-child {
                width: 5px;
            }
}