.hidden_top_bar {
position: absolute;
left: 0;
top: 0;
background: #111;
color: #fff;
z-index: 11111;
width: 100%;
padding: 40px 0;
transform: translateY(-100%);
transition: all .3s ease-in-out
}
.show_hidden_top_bar {
transform: translateY(0)
}
.hidden_top_bar > i {
position: absolute;
background: inherit;
right: 0;
bottom: 0;
cursor: pointer;
padding: 10px 20px;
transform: translateY(100%);
--r: 1em;
border-inline: var(--r) solid #0000;
border-radius: 0 0 calc(2* var(--r)) calc(2* var(--r)) / var(--r);
mask: radial-gradient(var(--r) at var(--r) 100%, #0000 98%, #000 101%) calc(-1* var(--r)) 0 / 100% var(--r) repeat-x, conic-gradient(#000 0 0) padding-box
}
.hidden_top_bar > i span {
font-family: sans-serif;
font-size: 13px;
margin-left: 5px;
display: inline-block;
vertical-align: middle
}
.rtl .hidden_top_bar > i span {
margin: 0 5px 0 0
}