.wbsf {
position: fixed;
top: var(--wbsf-top, 40%);
z-index: var(--wbsf-z, 999);
display: flex;
flex-direction: column;
gap: var(--wbsf-gap, 8px);
box-sizing: border-box;
width: var(--wbsf-w, 320px);
max-width: 100vw;
margin: 0;
padding: 0;
list-style: none; pointer-events: none;
}
.wbsf *,
.wbsf *::before,
.wbsf *::after {
box-sizing: border-box;
}
.wbsf[data-align="right"] {
right: 0;
}
.wbsf[data-align="left"] {
left: 0;
} .wbsf__flag {
position: relative;
display: flex;
align-items: center;
width: 100%;
min-height: 56px;
padding: 10px 0;
border: 0;
color: var(--wbsf-fg, #fff);
background: var(--wbsf-bg, #0e71b8);
text-decoration: none;
pointer-events: auto;
transition: transform 450ms cubic-bezier(0.2, 0.7, 0.2, 1), filter 200ms linear;
will-change: transform;
}
a.wbsf__flag {
cursor: pointer;
}
.wbsf__flag:hover {
filter: brightness(1.06);
} .wbsf[data-align="right"] .wbsf__flag {
border-radius: var(--wbsf-radius, 8px) 0 0 var(--wbsf-radius, 8px);
transform: translateX(calc(100% - var(--wbsf-tab, 60px)));
}
.wbsf[data-align="left"] .wbsf__flag {
flex-direction: row-reverse;
border-radius: 0 var(--wbsf-radius, 8px) var(--wbsf-radius, 8px) 0;
transform: translateX(calc(var(--wbsf-tab, 60px) - 100%));
} .wbsf[data-align="right"] .wbsf__flag:hover,
.wbsf[data-align="right"] .wbsf__flag:focus,
.wbsf[data-align="right"] .wbsf__flag:focus-within,
.wbsf[data-align="left"] .wbsf__flag:hover,
.wbsf[data-align="left"] .wbsf__flag:focus,
.wbsf[data-align="left"] .wbsf__flag:focus-within {
transform: translateX(0);
}
.wbsf__flag:focus-visible {
outline: 3px solid currentColor;
outline-offset: -5px;
}  .wbsf__icon {
display: flex;
flex: 0 0 var(--wbsf-tab, 60px);
align-items: center;
justify-content: center;
width: var(--wbsf-tab, 60px);
padding: 0 8px;
color: var(--wbsf-ic, #fff);
}
.wbsf__svg {
display: block;
flex: none;
width: var(--wbsf-ic-size, 28px);
height: var(--wbsf-ic-size, 28px);
max-width: 100%;
fill: currentColor;
}
.wbsf__body {
display: flex;
flex: 1 1 auto;
flex-direction: column;
justify-content: center;
gap: 2px;
min-width: 0;
padding: 0 16px 0 4px;
}
.wbsf[data-align="left"] .wbsf__body {
padding: 0 4px 0 16px;
text-align: right;
}
.wbsf__title,
.wbsf__desc {
color: var(--wbsf-fg, #fff);
overflow-wrap: anywhere;
}
.wbsf__title {
font-size: 16px;
font-weight: 700;
line-height: 1.3;
}
.wbsf__desc {
font-size: 14px;
font-weight: 400;
line-height: 1.35;
opacity: 0.92;
} .wbsf--glass .wbsf__flag {
background: rgba(var(--wbsf-bg-rgb, 14, 113, 184), var(--wbsf-alpha, 0.32));
-webkit-backdrop-filter: blur(var(--wbsf-blur, 14px)) saturate(160%);
backdrop-filter: blur(var(--wbsf-blur, 14px)) saturate(160%);
} .wbsf--glass.wbsf--edge .wbsf__flag {
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.wbsf--glass.wbsf--edge[data-align="right"] .wbsf__flag {
border-right: 0;
}
.wbsf--glass.wbsf--edge[data-align="left"] .wbsf__flag {
border-left: 0;
}
.wbsf--glass.wbsf--shadow .wbsf__flag {
box-shadow: 0 10px 34px -8px rgba(0, 0, 0, 0.35);
}
.wbsf--glass.wbsf--edge.wbsf--shadow .wbsf__flag {
box-shadow: 0 10px 34px -8px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.wbsf--glass .wbsf__title,
.wbsf--glass .wbsf__desc {
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
}
.wbsf--glass .wbsf__flag:hover {
filter: none;
background: rgba(var(--wbsf-bg-rgb, 14, 113, 184), calc(var(--wbsf-alpha, 0.32) + 0.12));
} @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
.wbsf--glass .wbsf__flag,
.wbsf--glass .wbsf__flag:hover {
background: rgba(var(--wbsf-bg-rgb, 14, 113, 184), 0.92);
}
} @media (prefers-reduced-motion: reduce) {
.wbsf__flag {
transition: none;
}
} @media (hover: none), (pointer: coarse) {
.wbsf[data-align="right"] .wbsf__flag,
.wbsf[data-align="right"] .wbsf__flag:hover,
.wbsf[data-align="right"] .wbsf__flag:focus,
.wbsf[data-align="right"] .wbsf__flag:focus-within {
transform: translateX(calc(100% - var(--wbsf-tab, 60px)));
}
.wbsf[data-align="left"] .wbsf__flag,
.wbsf[data-align="left"] .wbsf__flag:hover,
.wbsf[data-align="left"] .wbsf__flag:focus,
.wbsf[data-align="left"] .wbsf__flag:focus-within {
transform: translateX(calc(var(--wbsf-tab, 60px) - 100%));
}
}
@media print {
.wbsf {
display: none;
}
}