#notifier:has(*) {
    position: fixed;
    top: 100px;
    right: 50px;
    background-color: var(--color-primary-50);
    border-radius: 4px;
    max-width: 25%;
    border: 1px solid #333333;
    box-shadow: var(--shadow-nb);

    .message {
        display: flex;
        align-items: center;

        position: relative;

        &::before {
            content: "";
            position: absolute;
            height: 100%;
            width: 0.3em;
        }

        span {
            flex-grow: 1;
            padding: 1em 2em;
        }

        border-bottom: 1px solid #333333;

        &:first-child {
            &::before {
                border-top-left-radius: 4px;
            }
        }

        &:last-child {
            border-bottom: none;

            &::before {
                border-bottom-left-radius: 4px;
            }
        }

        &.success::before {
            background-color: var(--color-success-300);
        }

        &.error::before {
            background-color: var(--color-error-300);
        }

        .close-button {
            cursor: pointer;
            align-self: flex-start;
            padding: 4px;
        }
    }
}