.vbsi-wrap { column-gap: var(--vbso-gax, 15px); row-gap: var(--vbso-gay, 15px); }
.vbsi-wrap.vbsi-grid { display: grid; grid-template-columns: repeat(var(--vbso-col, 1), min-content); }
.vbsi-wrap.vbsi-flex { display: flex; flex-wrap: wrap; }
.vbsi-wrap.align-center { margin-inline: auto; width: auto; justify-content: center; }
.vbsi-wrap.align-right { margin-inline: auto 0; width: auto; justify-content: end; }
.vbsi-item { display: flex; align-items: center; text-decoration: none; transition: none; }
.vbsi-item:hover { text-decoration: none; }
.vbsi-icon { position: relative; aspect-ratio: 1/1; width: var(--vbso-isz, 50px); height: auto; display: flex; align-items: center; justify-content: center; background-color: var(--vbso-ibg, transparent); border: var(--vbso-brd, none); border-radius: var(--vbso-rad, initial); z-index: 1; transition: all var(--vbso-trs) ease; }
.vbsi-item:hover .vbsi-icon { background-color: var(--vbso-hbg, transparent); }
.vbsi-icon:after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: var(--vbso-sbd, 0px) solid var(--vbso-sbc); border-radius: var(--vbso-rad, initial); transition: all var(--vbso-trs) ease; }
.vbsi-icon svg { width: var(--vbso-svz, 50%); height: auto; fill: var(--vbso-ico, currentColor); transition: all var(--vbso-trs) ease; }
.vbsi-item:hover .vbsi-icon svg { fill: var(--vbso-hco, currentColor); }
.vbsi-text { flex: 1; border: var(--vbso-brd, none); margin-left: calc(-.5 * var(--vbso-isz, 50px)); z-index: 0; height: 74%; padding-inline: calc(.45 * var(--vbso-isz, 50px) + 20px) 20px; padding-bottom: 1px; display: flex; justify-content: center; align-items: center; color: var(--vbso-ico, currentColor); background-color: var(--vbso-ibg); white-space: nowrap; transition: all var(--vbso-trs) ease; }
.vbsi-item:hover .vbsi-text { background-color: var(--vbso-hbg); color: var(--vbso-hco, currentColor); }
.vbsi-wrap.mode-brand .vbsi-item { --vbso-ico: #fff; --vbso-ibg: var(--vbso-dsc); --vbso-hco: var(--vbso-dsc); --vbso-hbg: #fff; }
.vbsi-wrap.mode-brand-r .vbsi-item { --vbso-ico: var(--vbso-dsc); --vbso-ibg: #fff; --vbso-hco: #fff; --vbso-hbg: var(--vbso-dsc); }
.vbsi-wrap.mode-brand-r .vbsi-icon,
.vbsi-wrap.mode-brand-r .vbsi-text,
.vbsi-wrap.mode-brand .vbsi-icon,
.vbsi-wrap.mode-brand .vbsi-text { border-color: var(--vbso-dsc); }