.notification {
    position: relative;
    padding: var(--spacing-1x);
    padding-left: 2.2rem;
    margin-bottom: var(--spacing-1x);
    width: fit-content;
    color: white;
    border-radius: var(--radius-sm);
}

.notification .icon {
    position: absolute;
    left: .3rem;
    top: .3rem;
}

.notification.error {
    background: var(--colors-background-error);
}

.notification.warning {
    background: var(--colors-background-warning);
}

.notification.success {
    background: var(--colors-background-success);
}

.notification a {
    color: white;
    display: inline-block;
}

.notification a:hover {
    font-weight: bold;
}

.notification a[target=_blank] {
    padding-right: 1.3rem;
}

.notification a[target=_blank]:after {
    content: "";
    position: absolute;
    mask-image: url(/static/assets/sessions/external-link.svg);
    width: 1rem;
    height: 1rem;
    background-color: white;
    mask-size: 100% 100%;
    margin-top: -.3rem;
    margin-left: .3rem;
}