.ui-variant-toggle,.nav-ui-variant-toggle{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;flex-shrink:0;height:40px;padding:0 14px;font-size:14px;font-weight:700;letter-spacing:-.005em;line-height:1;border-radius:8px;border:1.5px solid #302d2b;background:#302d2b;color:#fff;cursor:pointer;white-space:nowrap;font-family:inherit}.ui-variant-toggle--compact{height:40px;padding:0 14px;font-size:14px;font-weight:700;border-width:1px}.ui-variant-toggle[data-active-variant=next],.nav-ui-variant-toggle[data-active-variant=next]{background:#fff;color:#302d2b;border-color:#302d2b59}.ui-variant-toggle:hover,.nav-ui-variant-toggle:hover{filter:brightness(.97)}.ui-variant-toggle--compact[data-active-variant=next]:hover{filter:none;border-color:#302d2b8c;background:var(--bg, #f7f5f0)}.hon-utility-inner .demo-ui-variant-slot,.hon-utility-inner .nav-ui-variant{display:flex;align-items:center;margin-right:auto}.hon-utility-inner .ui-variant-toggle,.hon-utility-inner .nav-ui-variant-toggle{height:28px;padding:0 10px;color:#fff;border-color:#ffffff73;background:transparent;font-size:11px;font-weight:600}.hon-utility-inner .ui-variant-toggle[data-active-variant=next],.hon-utility-inner .nav-ui-variant-toggle[data-active-variant=next]{background:#fff;color:#111;border-color:#fff}@media (max-width: 767px){.ui-variant-toggle,.ui-variant-toggle--compact,.nav-ui-variant-toggle{height:36px;padding:0 10px;font-size:13px}}