.notifications{
display:flex;
align-items:center;
justify-content:center;
gap:var(--gap);
position:relative;
margin:var(--gap) auto;
max-width:var(--max);
display:none;
}
.notifications.hidden{
display:none;
}
.notif-nav{
width:var(--iz2);
height:var(--iz2);
min-width:var(--iz2);
background-color:var(--bg2);
border:var(--bw1) solid var(--bc1);
border-radius:var(--br0);
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
flex-shrink:0;
box-shadow:var(--fbs);
}
.notif-nav:hover{
background-color:var(--hv1);
}
.notif-nav svg{
width:20px;
height:20px;
fill:var(--tx2);
stroke:var(--tx2);
}
.notif-nav:hover svg{
fill:var(--cl1);
stroke:var(--cl1);
}
.notif-nav.hidden{
display:none;
}
.notif-carousel{
flex:1;
min-width:0;
overflow:hidden;
}
.notif-track{
display:flex;
}
.notif{
flex:0 0 100%;
width:100%;
min-width:0;
display:none;
align-items:center;
justify-content:space-between;
background-color:var(--bg2);
border:var(--bw1) solid var(--bc1);
border-radius:var(--br0);
padding:var(--nog);
gap:16px;
box-shadow:var(--fbs);
}
.notif.active{
display:flex;
}
.notif.dismissed{
display:none !important;
}
.notif.notif-critical{
background-color:var(--rb1);
border-color:var(--rd1);
}
.notif.notif-urgent{
background-color:var(--ob2);
border-color:var(--cl1);
}
.notif.notif-info{
background-color:var(--bb1);
border-color:var(--lnk);
}
.notif-content{
display:flex;
align-items:center;
flex:1;
min-width:0;
overflow:hidden;
}
.notif-icon{
width:var(--iz2);
height:var(--iz2);
min-width:var(--iz2);
flex-shrink:0;
display:flex;
align-items:center;
justify-content:center;
border-radius:var(--br0);
position:relative;
}
.notif-icon svg{
width:24px;
height:24px;
}
.notif-icon .notif-icon-default,
.notif-icon .notif-icon-link{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
display:flex;
align-items:center;
justify-content:center;
transition:opacity .15s;
}
.notif-icon .notif-icon-link{
opacity:0;
}
.notif-icon:hover .notif-icon-default{
opacity:0;
}
.notif-icon:hover .notif-icon-link{
opacity:1;
}
.notif.notif-critical .notif-icon svg{
fill:var(--rd1);
stroke:var(--rd1);
}
.notif.notif-urgent .notif-icon svg{
fill:var(--cl1);
stroke:var(--cl1);
}
.notif.notif-info .notif-icon svg{
fill:var(--lnk);
stroke:var(--lnk);
}
.notif-text{
font-size:19px;
font-weight:500;
color:var(--tx1);
line-height:1.6;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
min-width:0;
}
.notif-text strong{
font-weight:700;
}
.notif.notif-critical .notif-text strong{
color:var(--rd1);
}
.notif.notif-urgent .notif-text strong{
color:var(--cl1);
}
.notif.notif-info .notif-text strong{
color:var(--lnk);
}
.notif-text a{
color:var(--lnk);
}
.notif-text a:hover{
text-decoration:underline;
text-underline-offset:1px;
}
.notif-close{
width:var(--iz2);
height:var(--iz2);
background-color:transparent;
border:2px solid transparent;
border-radius:var(--br0);
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
color:var(--tx3);
font-size:36px;
font-weight:500;
line-height:1;
padding:0;
flex-shrink:0;
}
.notif-close:hover{
background-color:var(--kw1);
color:var(--tx2);
}
.notif.notif-critical .notif-close{
color:var(--rb3);
}
.notif.notif-critical .notif-close:hover{
background-color:var(--rb2);
border-color:var(--rd1);
color:var(--rd1);
}
.notif.notif-urgent .notif-close{
color:var(--ob5);
}
.notif.notif-urgent .notif-close:hover{
background-color:var(--ob3);
border-color:var(--cl1);
color:var(--cl1);
}
.notif.notif-info .notif-close{
color:var(--bb3);
}
.notif.notif-info .notif-close:hover{
background-color:var(--bb2);
border-color:var(--lnk);
color:var(--lnk);
}
.notif-separator{
color:var(--tx3);
font-weight:400;
margin:0 4px;
flex-shrink:0;
}
.notif-link{
font-weight:600;
white-space:nowrap;
flex-shrink:0;
}
.notif.notif-critical .notif-link{
color:var(--rd1);
}
.notif.notif-urgent .notif-link{
color:var(--cl1);
}
.notif.notif-info .notif-link{
color:var(--lnk);
}
.notif-link:hover{
text-decoration:underline;
text-decoration-thickness:2px;
}
.notif-title{
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
min-width:0;
}