Panel icon

24:Te31b, Panel icon
always
hover
still
left-open
left-close
right-open
right-close
top-open
top-close
bottom-open
bottom-close
25:T6c058,
<!doctype html>
<!-- GENERATED by scripts/registry/gen-icons.ts from content/icons/panel.json -->
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Panel icon</title>
    <style>
      body { margin: 0; min-height: 100vh; display: grid; place-items: center; background: #0b0d10; color: #f2f4f7; font: 14px/1.4 system-ui, sans-serif; }
      .row { display: flex; align-items: center; gap: 28px; }
      .stack { display: grid; gap: 28px; justify-items: center; }
      figure { margin: 0; display: grid; gap: 8px; justify-items: center; }
      figcaption { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: #7c8594; }
      button { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 8px; border: 1px solid rgb(255 255 255 / 0.15); background: rgb(255 255 255 / 0.06); color: #fff; font: inherit; cursor: pointer; }
      .fbi { display: inline-block; vertical-align: middle; overflow: visible; --d: 1300ms; }
      .fbi .fbi-layer { animation-play-state: paused; transform-box: view-box; --delay-ms: calc(var(--delay, 0) * var(--d)); }
      .fbi[data-animate="always"] .fbi-layer, .fbi[data-animate="hover"]:hover .fbi-layer, .fbi[data-animate="hover"]:focus-visible .fbi-layer, .fbi-hot .fbi[data-animate="hover"] .fbi-layer { animation-play-state: running; }
      .fbi[data-animate="none"] .fbi-layer { animation: none; }
      .fbi .fbi-layer[data-variant] { display: none; }
      .fbi[data-variant="left-open"] .fbi-layer[data-variant="left-open"] { display: inline; }
      .fbi[data-variant="left-close"] .fbi-layer[data-variant="left-close"] { display: inline; }
      .fbi[data-variant="right-open"] .fbi-layer[data-variant="right-open"] { display: inline; }
      .fbi[data-variant="right-close"] .fbi-layer[data-variant="right-close"] { display: inline; }
      .fbi[data-variant="top-open"] .fbi-layer[data-variant="top-open"] { display: inline; }
      .fbi[data-variant="top-close"] .fbi-layer[data-variant="top-close"] { display: inline; }
      .fbi[data-variant="bottom-open"] .fbi-layer[data-variant="bottom-open"] { display: inline; }
      .fbi[data-variant="bottom-close"] .fbi-layer[data-variant="bottom-close"] { display: inline; }
      .fbi .fbi-slide-x { animation-name: fbi-slide-x; animation-duration: var(--d); animation-delay: var(--delay-ms); animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
      .fbi .fbi-slide-y { animation-name: fbi-slide-y; animation-duration: var(--d); animation-delay: var(--delay-ms); animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
      @media (prefers-reduced-motion: reduce) { .fbi .fbi-layer { animation: none !important; } }
      
      @keyframes fbi-spin { to { transform: rotate(360deg); } }
      @keyframes fbi-draw { 0% { stroke-dashoffset: 1; opacity: 0.2; } 55% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 1; } }
      @keyframes fbi-bounce { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-2.2px); } }
      @keyframes fbi-wiggle { 0%, 70%, 100% { transform: rotate(0); } 17% { transform: rotate(-9deg); } 35% { transform: rotate(9deg); } 52% { transform: rotate(-5deg); } }
      @keyframes fbi-pulse { 0%, 70%, 100% { transform: scale(1); } 35% { transform: scale(1.14); } }
      @keyframes fbi-swing { 0%, 80%, 100% { transform: rotate(0); } 16% { transform: rotate(13deg); } 32% { transform: rotate(-10deg); } 48% { transform: rotate(6deg); } 64% { transform: rotate(-3deg); } }
      @keyframes fbi-slide-x { 0%, 60%, 100% { transform: translateX(0); } 30% { transform: translateX(2.4px); } }
      @keyframes fbi-slide-y { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(2.4px); } }
      @keyframes fbi-ring { 0% { transform: scale(1); opacity: 0.9; } 100% { transform: scale(1.35); opacity: 0; } }
      @keyframes fbi-blink { 0%, 60%, 100% { opacity: 1; } 30% { opacity: 0.15; } }
      @keyframes fbi-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.6px); } }
      
    </style>
  </head>
  <body>
    <div class="stack">
      <div class="row">
        <figure><figcaption>always</figcaption><svg class="fbi" data-animate="always" data-variant="left-open" viewBox="0 0 24 24" width="56" height="56" fill="none" stroke="#F5C542" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
        <path data-variant="left-open" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.5 4h13A2.5 2.5 0 0 1 21 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5v-11A2.5 2.5 0 0 1 5.5 4Z" />
        <path data-variant="left-open" class="fbi-layer fbi-slide-x" style="--delay: 0.00; transform-origin: 12px 12px" d="M9.5 4v16" />
        <path data-variant="left-open" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M14.5 9.5 17 12l-2.5 2.5" />
        <path data-variant="left-close" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.5 4h13A2.5 2.5 0 0 1 21 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5v-11A2.5 2.5 0 0 1 5.5 4Z" />
        <path data-variant="left-close" class="fbi-layer fbi-slide-x" style="--delay: 0.00; transform-origin: 12px 12px" d="M9.5 4v16" />
        <path data-variant="left-close" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M17 9.5 14.5 12l2.5 2.5" />
        <path data-variant="right-open" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.5 4h13A2.5 2.5 0 0 1 21 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5v-11A2.5 2.5 0 0 1 5.5 4Z" />
        <path data-variant="right-open" class="fbi-layer fbi-slide-x" style="--delay: 0.00; transform-origin: 12px 12px" d="M14.5 4v16" />
        <path data-variant="right-open" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M9.5 9.5 7 12l2.5 2.5" />
        <path data-variant="right-close" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.5 4h13A2.5 2.5 0 0 1 21 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5v-11A2.5 2.5 0 0 1 5.5 4Z" />
        <path data-variant="right-close" class="fbi-layer fbi-slide-x" style="--delay: 0.00; transform-origin: 12px 12px" d="M14.5 4v16" />
        <path data-variant="right-close" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M7 9.5 9.5 12l-2.5 2.5" />
        <path data-variant="top-open" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.5 4h13A2.5 2.5 0 0 1 21 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5v-11A2.5 2.5 0 0 1 5.5 4Z" />
        <path data-variant="top-open" class="fbi-layer fbi-slide-y" style="--delay: 0.00; transform-origin: 12px 12px" d="M3 9.5h18" />
        <path data-variant="top-open" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M9.5 14.5 12 17l2.5-2.5" />
        <path data-variant="top-close" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.5 4h13A2.5 2.5 0 0 1 21 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5v-11A2.5 2.5 0 0 1 5.5 4Z" />
        <path data-variant="top-close" class="fbi-layer fbi-slide-y" style="--delay: 0.00; transform-origin: 12px 12px" d="M3 9.5h18" />
        <path data-variant="top-close" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M9.5 17 12 14.5l2.5 2.5" />
        <path data-variant="bottom-open" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.5 4h13A2.5 2.5 0 0 1 21 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5v-11A2.5 2.5 0 0 1 5.5 4Z" />
        <path data-variant="bottom-open" class="fbi-layer fbi-slide-y" style="--delay: 0.00; transform-origin: 12px 12px" d="M3 14.5h18" />
        <path data-variant="bottom-open" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M9.5 10.5 12 8l2.5 2.5" />
        <path data-variant="bottom-close" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.5 4h13A2.5 2.5 0 0 1 21 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5v-11A2.5 2.5 0 0 1 5.5 4Z" />
        <path data-variant="bottom-close" class="fbi-layer fbi-slide-y" style="--delay: 0.00; transform-origin: 12px 12px" d="M3 14.5h18" />
        <path data-variant="bottom-close" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M9.5 8 12 10.5l2.5-2.5" />
      </svg></figure>
        <figure><figcaption>hover</figcaption><svg class="fbi" data-animate="hover" data-variant="left-open" viewBox="0 0 24 24" width="56" height="56" fill="none" stroke="#38BDF8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
        <path data-variant="left-open" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.5 4h13A2.5 2.5 0 0 1 21 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5v-11A2.5 2.5 0 0 1 5.5 4Z" />
        <path data-variant="left-open" class="fbi-layer fbi-slide-x" style="--delay: 0.00; transform-origin: 12px 12px" d="M9.5 4v16" />
        <path data-variant="left-open" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M14.5 9.5 17 12l-2.5 2.5" />
        <path data-variant="left-close" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.5 4h13A2.5 2.5 0 0 1 21 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5v-11A2.5 2.5 0 0 1 5.5 4Z" />
        <path data-variant="left-close" class="fbi-layer fbi-slide-x" style="--delay: 0.00; transform-origin: 12px 12px" d="M9.5 4v16" />
        <path data-variant="left-close" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M17 9.5 14.5 12l2.5 2.5" />
        <path data-variant="right-open" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.5 4h13A2.5 2.5 0 0 1 21 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5v-11A2.5 2.5 0 0 1 5.5 4Z" />
        <path data-variant="right-open" class="fbi-layer fbi-slide-x" style="--delay: 0.00; transform-origin: 12px 12px" d="M14.5 4v16" />
        <path data-variant="right-open" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M9.5 9.5 7 12l2.5 2.5" />
        <path data-variant="right-close" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.5 4h13A2.5 2.5 0 0 1 21 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5v-11A2.5 2.5 0 0 1 5.5 4Z" />
        <path data-variant="right-close" class="fbi-layer fbi-slide-x" style="--delay: 0.00; transform-origin: 12px 12px" d="M14.5 4v16" />
        <path data-variant="right-close" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M7 9.5 9.5 12l-2.5 2.5" />
        <path data-variant="top-open" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.5 4h13A2.5 2.5 0 0 1 21 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5v-11A2.5 2.5 0 0 1 5.5 4Z" />
        <path data-variant="top-open" class="fbi-layer fbi-slide-y" style="--delay: 0.00; transform-origin: 12px 12px" d="M3 9.5h18" />
        <path data-variant="top-open" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M9.5 14.5 12 17l2.5-2.5" />
        <path data-variant="top-close" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.5 4h13A2.5 2.5 0 0 1 21 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5v-11A2.5 2.5 0 0 1 5.5 4Z" />
        <path data-variant="top-close" class="fbi-layer fbi-slide-y" style="--delay: 0.00; transform-origin: 12px 12px" d="M3 9.5h18" />
        <path data-variant="top-close" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M9.5 17 12 14.5l2.5 2.5" />
        <path data-variant="bottom-open" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.5 4h13A2.5 2.5 0 0 1 21 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5v-11A2.5 2.5 0 0 1 5.5 4Z" />
        <path data-variant="bottom-open" class="fbi-layer fbi-slide-y" style="--delay: 0.00; transform-origin: 12px 12px" d="M3 14.5h18" />
        <path data-variant="bottom-open" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M9.5 10.5 12 8l2.5 2.5" />
        <path data-variant="bottom-close" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.5 4h13A2.5 2.5 0 0 1 21 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5v-11A2.5 2.5 0 0 1 5.5 4Z" />
        <path data-variant="bottom-close" class="fbi-layer fbi-slide-y" style="--delay: 0.00; transform-origin: 12px 12px" d="M3 14.5h18" />
        <path data-variant="bottom-close" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M9.5 8 12 10.5l2.5-2.5" />
      </svg></figure>
        <figure><figcaption>still</figcaption><svg class="fbi" data-animate="none" data-variant="left-open" viewBox="0 0 24 24" width="56" height="56" fill="none" stroke="#9BE15D" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
        <path data-variant="left-open" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.5 4h13A2.5 2.5 0 0 1 21 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5v-11A2.5 2.5 0 0 1 5.5 4Z" />
        <path data-variant="left-open" class="fbi-layer fbi-slide-x" style="--delay: 0.00; transform-origin: 12px 12px" d="M9.5 4v16" />
        <path data-variant="left-open" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M14.5 9.5 17 12l-2.5 2.5" />
        <path data-variant="left-close" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.5 4h13A2.5 2.5 0 0 1 21 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5v-11A2.5 2.5 0 0 1 5.5 4Z" />
        <path data-variant="left-close" class="fbi-layer fbi-slide-x" style="--delay: 0.00; transform-origin: 12px 12px" d="M9.5 4v16" />
        <path data-variant="left-close" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M17 9.5 14.5 12l2.5 2.5" />
        <path data-variant="right-open" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.5 4h13A2.5 2.5 0 0 1 21 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5v-11A2.5 2.5 0 0 1 5.5 4Z" />
        <path data-variant="right-open" class="fbi-layer fbi-slide-x" style="--delay: 0.00; transform-origin: 12px 12px" d="M14.5 4v16" />
        <path data-variant="right-open" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M9.5 9.5 7 12l2.5 2.5" />
        <path data-variant="right-close" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.5 4h13A2.5 2.5 0 0 1 21 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5v-11A2.5 2.5 0 0 1 5.5 4Z" />
        <path data-variant="right-close" class="fbi-layer fbi-slide-x" style="--delay: 0.00; transform-origin: 12px 12px" d="M14.5 4v16" />
        <path data-variant="right-close" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M7 9.5 9.5 12l-2.5 2.5" />
        <path data-variant="top-open" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.5 4h13A2.5 2.5 0 0 1 21 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5v-11A2.5 2.5 0 0 1 5.5 4Z" />
        <path data-variant="top-open" class="fbi-layer fbi-slide-y" style="--delay: 0.00; transform-origin: 12px 12px" d="M3 9.5h18" />
        <path data-variant="top-open" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M9.5 14.5 12 17l2.5-2.5" />
        <path data-variant="top-close" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.5 4h13A2.5 2.5 0 0 1 21 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5v-11A2.5 2.5 0 0 1 5.5 4Z" />
        <path data-variant="top-close" class="fbi-layer fbi-slide-y" style="--delay: 0.00; transform-origin: 12px 12px" d="M3 9.5h18" />
        <path data-variant="top-close" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M9.5 17 12 14.5l2.5 2.5" />
        <path data-variant="bottom-open" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.5 4h13A2.5 2.5 0 0 1 21 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5v-11A2.5 2.5 0 0 1 5.5 4Z" />
        <path data-variant="bottom-open" class="fbi-layer fbi-slide-y" style="--delay: 0.00; transform-origin: 12px 12px" d="M3 14.5h18" />
        <path data-variant="bottom-open" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M9.5 10.5 12 8l2.5 2.5" />
        <path data-variant="bottom-close" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.5 4h13A2.5 2.5 0 0 1 21 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5v-11A2.5 2.5 0 0 1 5.5 4Z" />
        <path data-variant="bottom-close" class="fbi-layer fbi-slide-y" style="--delay: 0.00; transform-origin: 12px 12px" d="M3 14.5h18" />
        <path data-variant="bottom-close" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M9.5 8 12 10.5l2.5-2.5" />
      </svg></figure>
      </div>
      <div class="row">
      <figure><figcaption>left-open</figcaption><svg class="fbi" data-animate="always" data-variant="left-open" viewBox="0 0 24 24" width="40" height="40" fill="none" stroke="#F5C542" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
        <path data-variant="left-open" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.5 4h13A2.5 2.5 0 0 1 21 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5v-11A2.5 2.5 0 0 1 5.5 4Z" />
        <path data-variant="left-open" class="fbi-layer fbi-slide-x" style="--delay: 0.00; transform-origin: 12px 12px" d="M9.5 4v16" />
        <path data-variant="left-open" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M14.5 9.5 17 12l-2.5 2.5" />
        <path data-variant="left-close" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.5 4h13A2.5 2.5 0 0 1 21 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5v-11A2.5 2.5 0 0 1 5.5 4Z" />
        <path data-variant="left-close" class="fbi-layer fbi-slide-x" style="--delay: 0.00; transform-origin: 12px 12px" d="M9.5 4v16" />
        <path data-variant="left-close" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M17 9.5 14.5 12l2.5 2.5" />
        <path data-variant="right-open" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.5 4h13A2.5 2.5 0 0 1 21 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5v-11A2.5 2.5 0 0 1 5.5 4Z" />
        <path data-variant="right-open" class="fbi-layer fbi-slide-x" style="--delay: 0.00; transform-origin: 12px 12px" d="M14.5 4v16" />
        <path data-variant="right-open" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M9.5 9.5 7 12l2.5 2.5" />
        <path data-variant="right-close" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.5 4h13A2.5 2.5 0 0 1 21 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5v-11A2.5 2.5 0 0 1 5.5 4Z" />
        <path data-variant="right-close" class="fbi-layer fbi-slide-x" style="--delay: 0.00; transform-origin: 12px 12px" d="M14.5 4v16" />
        <path data-variant="right-close" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M7 9.5 9.5 12l-2.5 2.5" />
        <path data-variant="top-open" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.5 4h13A2.5 2.5 0 0 1 21 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5v-11A2.5 2.5 0 0 1 5.5 4Z" />
        <path data-variant="top-open" class="fbi-layer fbi-slide-y" style="--delay: 0.00; transform-origin: 12px 12px" d="M3 9.5h18" />
        <path data-variant="top-open" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M9.5 14.5 12 17l2.5-2.5" />
        <path data-variant="top-close" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.5 4h13A2.5 2.5 0 0 1 21 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5v-11A2.5 2.5 0 0 1 5.5 4Z" />
        <path data-variant="top-close" class="fbi-layer fbi-slide-y" style="--delay: 0.00; transform-origin: 12px 12px" d="M3 9.5h18" />
        <path data-variant="top-close" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M9.5 17 12 14.5l2.5 2.5" />
        <path data-variant="bottom-open" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.5 4h13A2.5 2.5 0 0 1 21 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5v-11A2.5 2.5 0 0 1 5.5 4Z" />
        <path data-variant="bottom-open" class="fbi-layer fbi-slide-y" style="--delay: 0.00; transform-origin: 12px 12px" d="M3 14.5h18" />
        <path data-variant="bottom-open" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M9.5 10.5 12 8l2.5 2.5" />
        <path data-variant="bottom-close" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.5 4h13A2.5 2.5 0 0 1 21 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5v-11A2.5 2.5 0 0 1 5.5 4Z" />
        <path data-variant="bottom-close" class="fbi-layer fbi-slide-y" style="--delay: 0.00; transform-origin: 12px 12px" d="M3 14.5h18" />
        <path data-variant="bottom-close" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M9.5 8 12 10.5l2.5-2.5" />
      </svg></figure>
      <figure><figcaption>left-close</figcaption><svg class="fbi" data-animate="always" data-variant="left-close" viewBox="0 0 24 24" width="40" height="40" fill="none" stroke="#F5C542" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
        <path data-variant="left-open" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.5 4h13A2.5 2.5 0 0 1 21 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5v-11A2.5 2.5 0 0 1 5.5 4Z" />
        <path data-variant="left-open" class="fbi-layer fbi-slide-x" style="--delay: 0.00; transform-origin: 12px 12px" d="M9.5 4v16" />
        <path data-variant="left-open" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M14.5 9.5 17 12l-2.5 2.5" />
        <path data-variant="left-close" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.5 4h13A2.5 2.5 0 0 1 21 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5v-11A2.5 2.5 0 0 1 5.5 4Z" />
        <path data-variant="left-close" class="fbi-layer fbi-slide-x" style="--delay: 0.00; transform-origin: 12px 12px" d="M9.5 4v16" />
        <path data-variant="left-close" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M17 9.5 14.5 12l2.5 2.5" />
        <path data-variant="right-open" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.5 4h13A2.5 2.5 0 0 1 21 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5v-11A2.5 2.5 0 0 1 5.5 4Z" />
        <path data-variant="right-open" class="fbi-layer fbi-slide-x" style="--delay: 0.00; transform-origin: 12px 12px" d="M14.5 4v16" />
        <path data-variant="right-open" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M9.5 9.5 7 12l2.5 2.5" />
        <path data-variant="right-close" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.5 4h13A2.5 2.5 0 0 1 21 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5v-11A2.5 2.5 0 0 1 5.5 4Z" />
        <path data-variant="right-close" class="fbi-layer fbi-slide-x" style="--delay: 0.00; transform-origin: 12px 12px" d="M14.5 4v16" />
        <path data-variant="right-close" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M7 9.5 9.5 12l-2.5 2.5" />
        <path data-variant="top-open" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.5 4h13A2.5 2.5 0 0 1 21 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5v-11A2.5 2.5 0 0 1 5.5 4Z" />
        <path data-variant="top-open" class="fbi-layer fbi-slide-y" style="--delay: 0.00; transform-origin: 12px 12px" d="M3 9.5h18" />
        <path data-variant="top-open" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M9.5 14.5 12 17l2.5-2.5" />
        <path data-variant="top-close" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.5 4h13A2.5 2.5 0 0 1 21 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5v-11A2.5 2.5 0 0 1 5.5 4Z" />
        <path data-variant="top-close" class="fbi-layer fbi-slide-y" style="--delay: 0.00; transform-origin: 12px 12px" d="M3 9.5h18" />
        <path data-variant="top-close" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M9.5 17 12 14.5l2.5 2.5" />
        <path data-variant="bottom-open" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.5 4h13A2.5 2.5 0 0 1 21 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5v-11A2.5 2.5 0 0 1 5.5 4Z" />
        <path data-variant="bottom-open" class="fbi-layer fbi-slide-y" style="--delay: 0.00; transform-origin: 12px 12px" d="M3 14.5h18" />
        <path data-variant="bottom-open" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M9.5 10.5 12 8l2.5 2.5" />
        <path data-variant="bottom-close" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.5 4h13A2.5 2.5 0 0 1 21 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5v-11A2.5 2.5 0 0 1 5.5 4Z" />
        <path data-variant="bottom-close" class="fbi-layer fbi-slide-y" style="--delay: 0.00; transform-origin: 12px 12px" d="M3 14.5h18" />
        <path data-variant="bottom-close" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M9.5 8 12 10.5l2.5-2.5" />
      </svg></figure>
      <figure><figcaption>right-open</figcaption><svg class="fbi" data-animate="always" data-variant="right-open" viewBox="0 0 24 24" width="40" height="40" fill="none" stroke="#F5C542" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
        <path data-variant="left-open" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.5 4h13A2.5 2.5 0 0 1 21 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5v-11A2.5 2.5 0 0 1 5.5 4Z" />
        <path data-variant="left-open" class="fbi-layer fbi-slide-x" style="--delay: 0.00; transform-origin: 12px 12px" d="M9.5 4v16" />
        <path data-variant="left-open" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M14.5 9.5 17 12l-2.5 2.5" />
        <path data-variant="left-close" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.5 4h13A2.5 2.5 0 0 1 21 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5v-11A2.5 2.5 0 0 1 5.5 4Z" />
        <path data-variant="left-close" class="fbi-layer fbi-slide-x" style="--delay: 0.00; transform-origin: 12px 12px" d="M9.5 4v16" />
        <path data-variant="left-close" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M17 9.5 14.5 12l2.5 2.5" />
        <path data-variant="right-open" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.5 4h13A2.5 2.5 0 0 1 21 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5v-11A2.5 2.5 0 0 1 5.5 4Z" />
        <path data-variant="right-open" class="fbi-layer fbi-slide-x" style="--delay: 0.00; transform-origin: 12px 12px" d="M14.5 4v16" />
        <path data-variant="right-open" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M9.5 9.5 7 12l2.5 2.5" />
        <path data-variant="right-close" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.5 4h13A2.5 2.5 0 0 1 21 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5v-11A2.5 2.5 0 0 1 5.5 4Z" />
        <path data-variant="right-close" class="fbi-layer fbi-slide-x" style="--delay: 0.00; transform-origin: 12px 12px" d="M14.5 4v16" />
        <path data-variant="right-close" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M7 9.5 9.5 12l-2.5 2.5" />
        <path data-variant="top-open" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.5 4h13A2.5 2.5 0 0 1 21 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5v-11A2.5 2.5 0 0 1 5.5 4Z" />
        <path data-variant="top-open" class="fbi-layer fbi-slide-y" style="--delay: 0.00; transform-origin: 12px 12px" d="M3 9.5h18" />
        <path data-variant="top-open" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M9.5 14.5 12 17l2.5-2.5" />
        <path data-variant="top-close" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.5 4h13A2.5 2.5 0 0 1 21 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5v-11A2.5 2.5 0 0 1 5.5 4Z" />
        <path data-variant="top-close" class="fbi-layer fbi-slide-y" style="--delay: 0.00; transform-origin: 12px 12px" d="M3 9.5h18" />
        <path data-variant="top-close" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M9.5 17 12 14.5l2.5 2.5" />
        <path data-variant="bottom-open" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.5 4h13A2.5 2.5 0 0 1 21 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5v-11A2.5 2.5 0 0 1 5.5 4Z" />
        <path data-variant="bottom-open" class="fbi-layer fbi-slide-y" style="--delay: 0.00; transform-origin: 12px 12px" d="M3 14.5h18" />
        <path data-variant="bottom-open" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M9.5 10.5 12 8l2.5 2.5" />
        <path data-variant="bottom-close" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.5 4h13A2.5 2.5 0 0 1 21 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5v-11A2.5 2.5 0 0 1 5.5 4Z" />
        <path data-variant="bottom-close" class="fbi-layer fbi-slide-y" style="--delay: 0.00; transform-origin: 12px 12px" d="M3 14.5h18" />
        <path data-variant="bottom-close" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M9.5 8 12 10.5l2.5-2.5" />
      </svg></figure>
      <figure><figcaption>right-close</figcaption><svg class="fbi" data-animate="always" data-variant="right-close" viewBox="0 0 24 24" width="40" height="40" fill="none" stroke="#F5C542" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
        <path data-variant="left-open" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.5 4h13A2.5 2.5 0 0 1 21 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5v-11A2.5 2.5 0 0 1 5.5 4Z" />
        <path data-variant="left-open" class="fbi-layer fbi-slide-x" style="--delay: 0.00; transform-origin: 12px 12px" d="M9.5 4v16" />
        <path data-variant="left-open" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M14.5 9.5 17 12l-2.5 2.5" />
        <path data-variant="left-close" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.5 4h13A2.5 2.5 0 0 1 21 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5v-11A2.5 2.5 0 0 1 5.5 4Z" />
        <path data-variant="left-close" class="fbi-layer fbi-slide-x" style="--delay: 0.00; transform-origin: 12px 12px" d="M9.5 4v16" />
        <path data-variant="left-close" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M17 9.5 14.5 12l2.5 2.5" />
        <path data-variant="right-open" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.5 4h13A2.5 2.5 0 0 1 21 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5v-11A2.5 2.5 0 0 1 5.5 4Z" />
        <path data-variant="right-open" class="fbi-layer fbi-slide-x" style="--delay: 0.00; transform-origin: 12px 12px" d="M14.5 4v16" />
        <path data-variant="right-open" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M9.5 9.5 7 12l2.5 2.5" />
        <path data-variant="right-close" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.5 4h13A2.5 2.5 0 0 1 21 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5v-11A2.5 2.5 0 0 1 5.5 4Z" />
        <path data-variant="right-close" class="fbi-layer fbi-slide-x" style="--delay: 0.00; transform-origin: 12px 12px" d="M14.5 4v16" />
        <path data-variant="right-close" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M7 9.5 9.5 12l-2.5 2.5" />
        <path data-variant="top-open" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.5 4h13A2.5 2.5 0 0 1 21 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5v-11A2.5 2.5 0 0 1 5.5 4Z" />
        <path data-variant="top-open" class="fbi-layer fbi-slide-y" style="--delay: 0.00; transform-origin: 12px 12px" d="M3 9.5h18" />
        <path data-variant="top-open" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M9.5 14.5 12 17l2.5-2.5" />
        <path data-variant="top-close" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.5 4h13A2.5 2.5 0 0 1 21 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5v-11A2.5 2.5 0 0 1 5.5 4Z" />
        <path data-variant="top-close" class="fbi-layer fbi-slide-y" style="--delay: 0.00; transform-origin: 12px 12px" d="M3 9.5h18" />
        <path data-variant="top-close" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M9.5 17 12 14.5l2.5 2.5" />
        <path data-variant="bottom-open" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.5 4h13A2.5 2.5 0 0 1 21 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5v-11A2.5 2.5 0 0 1 5.5 4Z" />
        <path data-variant="bottom-open" class="fbi-layer fbi-slide-y" style="--delay: 0.00; transform-origin: 12px 12px" d="M3 14.5h18" />
        <path data-variant="bottom-open" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M9.5 10.5 12 8l2.5 2.5" />
        <path data-variant="bottom-close" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.5 4h13A2.5 2.5 0 0 1 21 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5v-11A2.5 2.5 0 0 1 5.5 4Z" />
        <path data-variant="bottom-close" class="fbi-layer fbi-slide-y" style="--delay: 0.00; transform-origin: 12px 12px" d="M3 14.5h18" />
        <path data-variant="bottom-close" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M9.5 8 12 10.5l2.5-2.5" />
      </svg></figure>
      <figure><figcaption>top-open</figcaption><svg class="fbi" data-animate="always" data-variant="top-open" viewBox="0 0 24 24" width="40" height="40" fill="none" stroke="#F5C542" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
        <path data-variant="left-open" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.5 4h13A2.5 2.5 0 0 1 21 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5v-11A2.5 2.5 0 0 1 5.5 4Z" />
        <path data-variant="left-open" class="fbi-layer fbi-slide-x" style="--delay: 0.00; transform-origin: 12px 12px" d="M9.5 4v16" />
        <path data-variant="left-open" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M14.5 9.5 17 12l-2.5 2.5" />
        <path data-variant="left-close" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.5 4h13A2.5 2.5 0 0 1 21 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5v-11A2.5 2.5 0 0 1 5.5 4Z" />
        <path data-variant="left-close" class="fbi-layer fbi-slide-x" style="--delay: 0.00; transform-origin: 12px 12px" d="M9.5 4v16" />
        <path data-variant="left-close" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M17 9.5 14.5 12l2.5 2.5" />
        <path data-variant="right-open" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.5 4h13A2.5 2.5 0 0 1 21 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5v-11A2.5 2.5 0 0 1 5.5 4Z" />
        <path data-variant="right-open" class="fbi-layer fbi-slide-x" style="--delay: 0.00; transform-origin: 12px 12px" d="M14.5 4v16" />
        <path data-variant="right-open" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M9.5 9.5 7 12l2.5 2.5" />
        <path data-variant="right-close" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.5 4h13A2.5 2.5 0 0 1 21 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5v-11A2.5 2.5 0 0 1 5.5 4Z" />
        <path data-variant="right-close" class="fbi-layer fbi-slide-x" style="--delay: 0.00; transform-origin: 12px 12px" d="M14.5 4v16" />
        <path data-variant="right-close" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M7 9.5 9.5 12l-2.5 2.5" />
        <path data-variant="top-open" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.5 4h13A2.5 2.5 0 0 1 21 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5v-11A2.5 2.5 0 0 1 5.5 4Z" />
        <path data-variant="top-open" class="fbi-layer fbi-slide-y" style="--delay: 0.00; transform-origin: 12px 12px" d="M3 9.5h18" />
        <path data-variant="top-open" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M9.5 14.5 12 17l2.5-2.5" />
        <path data-variant="top-close" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.5 4h13A2.5 2.5 0 0 1 21 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5v-11A2.5 2.5 0 0 1 5.5 4Z" />
        <path data-variant="top-close" class="fbi-layer fbi-slide-y" style="--delay: 0.00; transform-origin: 12px 12px" d="M3 9.5h18" />
        <path data-variant="top-close" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M9.5 17 12 14.5l2.5 2.5" />
        <path data-variant="bottom-open" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.5 4h13A2.5 2.5 0 0 1 21 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5v-11A2.5 2.5 0 0 1 5.5 4Z" />
        <path data-variant="bottom-open" class="fbi-layer fbi-slide-y" style="--delay: 0.00; transform-origin: 12px 12px" d="M3 14.5h18" />
        <path data-variant="bottom-open" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M9.5 10.5 12 8l2.5 2.5" />
        <path data-variant="bottom-close" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.5 4h13A2.5 2.5 0 0 1 21 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5v-11A2.5 2.5 0 0 1 5.5 4Z" />
        <path data-variant="bottom-close" class="fbi-layer fbi-slide-y" style="--delay: 0.00; transform-origin: 12px 12px" d="M3 14.5h18" />
        <path data-variant="bottom-close" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M9.5 8 12 10.5l2.5-2.5" />
      </svg></figure>
      <figure><figcaption>top-close</figcaption><svg class="fbi" data-animate="always" data-variant="top-close" viewBox="0 0 24 24" width="40" height="40" fill="none" stroke="#F5C542" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
        <path data-variant="left-open" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.5 4h13A2.5 2.5 0 0 1 21 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5v-11A2.5 2.5 0 0 1 5.5 4Z" />
        <path data-variant="left-open" class="fbi-layer fbi-slide-x" style="--delay: 0.00; transform-origin: 12px 12px" d="M9.5 4v16" />
        <path data-variant="left-open" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M14.5 9.5 17 12l-2.5 2.5" />
        <path data-variant="left-close" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.5 4h13A2.5 2.5 0 0 1 21 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5v-11A2.5 2.5 0 0 1 5.5 4Z" />
        <path data-variant="left-close" class="fbi-layer fbi-slide-x" style="--delay: 0.00; transform-origin: 12px 12px" d="M9.5 4v16" />
        <path data-variant="left-close" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M17 9.5 14.5 12l2.5 2.5" />
        <path data-variant="right-open" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.5 4h13A2.5 2.5 0 0 1 21 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5v-11A2.5 2.5 0 0 1 5.5 4Z" />
        <path data-variant="right-open" class="fbi-layer fbi-slide-x" style="--delay: 0.00; transform-origin: 12px 12px" d="M14.5 4v16" />
        <path data-variant="right-open" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M9.5 9.5 7 12l2.5 2.5" />
        <path data-variant="right-close" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.5 4h13A2.5 2.5 0 0 1 21 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5v-11A2.5 2.5 0 0 1 5.5 4Z" />
        <path data-variant="right-close" class="fbi-layer fbi-slide-x" style="--delay: 0.00; transform-origin: 12px 12px" d="M14.5 4v16" />
        <path data-variant="right-close" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M7 9.5 9.5 12l-2.5 2.5" />
        <path data-variant="top-open" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.5 4h13A2.5 2.5 0 0 1 21 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5v-11A2.5 2.5 0 0 1 5.5 4Z" />
        <path data-variant="top-open" class="fbi-layer fbi-slide-y" style="--delay: 0.00; transform-origin: 12px 12px" d="M3 9.5h18" />
        <path data-variant="top-open" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M9.5 14.5 12 17l2.5-2.5" />
        <path data-variant="top-close" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.5 4h13A2.5 2.5 0 0 1 21 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5v-11A2.5 2.5 0 0 1 5.5 4Z" />
        <path data-variant="top-close" class="fbi-layer fbi-slide-y" style="--delay: 0.00; transform-origin: 12px 12px" d="M3 9.5h18" />
        <path data-variant="top-close" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M9.5 17 12 14.5l2.5 2.5" />
        <path data-variant="bottom-open" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.5 4h13A2.5 2.5 0 0 1 21 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5v-11A2.5 2.5 0 0 1 5.5 4Z" />
        <path data-variant="bottom-open" class="fbi-layer fbi-slide-y" style="--delay: 0.00; transform-origin: 12px 12px" d="M3 14.5h18" />
        <path data-variant="bottom-open" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M9.5 10.5 12 8l2.5 2.5" />
        <path data-variant="bottom-close" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.5 4h13A2.5 2.5 0 0 1 21 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5v-11A2.5 2.5 0 0 1 5.5 4Z" />
        <path data-variant="bottom-close" class="fbi-layer fbi-slide-y" style="--delay: 0.00; transform-origin: 12px 12px" d="M3 14.5h18" />
        <path data-variant="bottom-close" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M9.5 8 12 10.5l2.5-2.5" />
      </svg></figure>
      <figure><figcaption>bottom-open</figcaption><svg class="fbi" data-animate="always" data-variant="bottom-open" viewBox="0 0 24 24" width="40" height="40" fill="none" stroke="#F5C542" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
        <path data-variant="left-open" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.5 4h13A2.5 2.5 0 0 1 21 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5v-11A2.5 2.5 0 0 1 5.5 4Z" />
        <path data-variant="left-open" class="fbi-layer fbi-slide-x" style="--delay: 0.00; transform-origin: 12px 12px" d="M9.5 4v16" />
        <path data-variant="left-open" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M14.5 9.5 17 12l-2.5 2.5" />
        <path data-variant="left-close" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.5 4h13A2.5 2.5 0 0 1 21 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5v-11A2.5 2.5 0 0 1 5.5 4Z" />
        <path data-variant="left-close" class="fbi-layer fbi-slide-x" style="--delay: 0.00; transform-origin: 12px 12px" d="M9.5 4v16" />
        <path data-variant="left-close" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M17 9.5 14.5 12l2.5 2.5" />
        <path data-variant="right-open" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.5 4h13A2.5 2.5 0 0 1 21 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5v-11A2.5 2.5 0 0 1 5.5 4Z" />
        <path data-variant="right-open" class="fbi-layer fbi-slide-x" style="--delay: 0.00; transform-origin: 12px 12px" d="M14.5 4v16" />
        <path data-variant="right-open" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M9.5 9.5 7 12l2.5 2.5" />
        <path data-variant="right-close" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.5 4h13A2.5 2.5 0 0 1 21 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5v-11A2.5 2.5 0 0 1 5.5 4Z" />
        <path data-variant="right-close" class="fbi-layer fbi-slide-x" style="--delay: 0.00; transform-origin: 12px 12px" d="M14.5 4v16" />
        <path data-variant="right-close" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M7 9.5 9.5 12l-2.5 2.5" />
        <path data-variant="top-open" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.5 4h13A2.5 2.5 0 0 1 21 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5v-11A2.5 2.5 0 0 1 5.5 4Z" />
        <path data-variant="top-open" class="fbi-layer fbi-slide-y" style="--delay: 0.00; transform-origin: 12px 12px" d="M3 9.5h18" />
        <path data-variant="top-open" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M9.5 14.5 12 17l2.5-2.5" />
        <path data-variant="top-close" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.5 4h13A2.5 2.5 0 0 1 21 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5v-11A2.5 2.5 0 0 1 5.5 4Z" />
        <path data-variant="top-close" class="fbi-layer fbi-slide-y" style="--delay: 0.00; transform-origin: 12px 12px" d="M3 9.5h18" />
        <path data-variant="top-close" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M9.5 17 12 14.5l2.5 2.5" />
        <path data-variant="bottom-open" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.5 4h13A2.5 2.5 0 0 1 21 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5v-11A2.5 2.5 0 0 1 5.5 4Z" />
        <path data-variant="bottom-open" class="fbi-layer fbi-slide-y" style="--delay: 0.00; transform-origin: 12px 12px" d="M3 14.5h18" />
        <path data-variant="bottom-open" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M9.5 10.5 12 8l2.5 2.5" />
        <path data-variant="bottom-close" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.5 4h13A2.5 2.5 0 0 1 21 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5v-11A2.5 2.5 0 0 1 5.5 4Z" />
        <path data-variant="bottom-close" class="fbi-layer fbi-slide-y" style="--delay: 0.00; transform-origin: 12px 12px" d="M3 14.5h18" />
        <path data-variant="bottom-close" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M9.5 8 12 10.5l2.5-2.5" />
      </svg></figure>
      <figure><figcaption>bottom-close</figcaption><svg class="fbi" data-animate="always" data-variant="bottom-close" viewBox="0 0 24 24" width="40" height="40" fill="none" stroke="#F5C542" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
        <path data-variant="left-open" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.5 4h13A2.5 2.5 0 0 1 21 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5v-11A2.5 2.5 0 0 1 5.5 4Z" />
        <path data-variant="left-open" class="fbi-layer fbi-slide-x" style="--delay: 0.00; transform-origin: 12px 12px" d="M9.5 4v16" />
        <path data-variant="left-open" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M14.5 9.5 17 12l-2.5 2.5" />
        <path data-variant="left-close" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.5 4h13A2.5 2.5 0 0 1 21 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5v-11A2.5 2.5 0 0 1 5.5 4Z" />
        <path data-variant="left-close" class="fbi-layer fbi-slide-x" style="--delay: 0.00; transform-origin: 12px 12px" d="M9.5 4v16" />
        <path data-variant="left-close" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M17 9.5 14.5 12l2.5 2.5" />
        <path data-variant="right-open" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.5 4h13A2.5 2.5 0 0 1 21 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5v-11A2.5 2.5 0 0 1 5.5 4Z" />
        <path data-variant="right-open" class="fbi-layer fbi-slide-x" style="--delay: 0.00; transform-origin: 12px 12px" d="M14.5 4v16" />
        <path data-variant="right-open" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M9.5 9.5 7 12l2.5 2.5" />
        <path data-variant="right-close" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.5 4h13A2.5 2.5 0 0 1 21 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5v-11A2.5 2.5 0 0 1 5.5 4Z" />
        <path data-variant="right-close" class="fbi-layer fbi-slide-x" style="--delay: 0.00; transform-origin: 12px 12px" d="M14.5 4v16" />
        <path data-variant="right-close" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M7 9.5 9.5 12l-2.5 2.5" />
        <path data-variant="top-open" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.5 4h13A2.5 2.5 0 0 1 21 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5v-11A2.5 2.5 0 0 1 5.5 4Z" />
        <path data-variant="top-open" class="fbi-layer fbi-slide-y" style="--delay: 0.00; transform-origin: 12px 12px" d="M3 9.5h18" />
        <path data-variant="top-open" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M9.5 14.5 12 17l2.5-2.5" />
        <path data-variant="top-close" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.5 4h13A2.5 2.5 0 0 1 21 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5v-11A2.5 2.5 0 0 1 5.5 4Z" />
        <path data-variant="top-close" class="fbi-layer fbi-slide-y" style="--delay: 0.00; transform-origin: 12px 12px" d="M3 9.5h18" />
        <path data-variant="top-close" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M9.5 17 12 14.5l2.5 2.5" />
        <path data-variant="bottom-open" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.5 4h13A2.5 2.5 0 0 1 21 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5v-11A2.5 2.5 0 0 1 5.5 4Z" />
        <path data-variant="bottom-open" class="fbi-layer fbi-slide-y" style="--delay: 0.00; transform-origin: 12px 12px" d="M3 14.5h18" />
        <path data-variant="bottom-open" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M9.5 10.5 12 8l2.5 2.5" />
        <path data-variant="bottom-close" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.5 4h13A2.5 2.5 0 0 1 21 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5v-11A2.5 2.5 0 0 1 5.5 4Z" />
        <path data-variant="bottom-close" class="fbi-layer fbi-slide-y" style="--delay: 0.00; transform-origin: 12px 12px" d="M3 14.5h18" />
        <path data-variant="bottom-close" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M9.5 8 12 10.5l2.5-2.5" />
      </svg></figure>
      </div>
      <button type="button" class="fbi-hot-target"><svg class="fbi" data-animate="hover" data-variant="left-open" viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="#F5C542" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
        <path data-variant="left-open" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.5 4h13A2.5 2.5 0 0 1 21 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5v-11A2.5 2.5 0 0 1 5.5 4Z" />
        <path data-variant="left-open" class="fbi-layer fbi-slide-x" style="--delay: 0.00; transform-origin: 12px 12px" d="M9.5 4v16" />
        <path data-variant="left-open" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M14.5 9.5 17 12l-2.5 2.5" />
        <path data-variant="left-close" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.5 4h13A2.5 2.5 0 0 1 21 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5v-11A2.5 2.5 0 0 1 5.5 4Z" />
        <path data-variant="left-close" class="fbi-layer fbi-slide-x" style="--delay: 0.00; transform-origin: 12px 12px" d="M9.5 4v16" />
        <path data-variant="left-close" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M17 9.5 14.5 12l2.5 2.5" />
        <path data-variant="right-open" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.5 4h13A2.5 2.5 0 0 1 21 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5v-11A2.5 2.5 0 0 1 5.5 4Z" />
        <path data-variant="right-open" class="fbi-layer fbi-slide-x" style="--delay: 0.00; transform-origin: 12px 12px" d="M14.5 4v16" />
        <path data-variant="right-open" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M9.5 9.5 7 12l2.5 2.5" />
        <path data-variant="right-close" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.5 4h13A2.5 2.5 0 0 1 21 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5v-11A2.5 2.5 0 0 1 5.5 4Z" />
        <path data-variant="right-close" class="fbi-layer fbi-slide-x" style="--delay: 0.00; transform-origin: 12px 12px" d="M14.5 4v16" />
        <path data-variant="right-close" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M7 9.5 9.5 12l-2.5 2.5" />
        <path data-variant="top-open" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.5 4h13A2.5 2.5 0 0 1 21 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5v-11A2.5 2.5 0 0 1 5.5 4Z" />
        <path data-variant="top-open" class="fbi-layer fbi-slide-y" style="--delay: 0.00; transform-origin: 12px 12px" d="M3 9.5h18" />
        <path data-variant="top-open" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M9.5 14.5 12 17l2.5-2.5" />
        <path data-variant="top-close" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.5 4h13A2.5 2.5 0 0 1 21 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5v-11A2.5 2.5 0 0 1 5.5 4Z" />
        <path data-variant="top-close" class="fbi-layer fbi-slide-y" style="--delay: 0.00; transform-origin: 12px 12px" d="M3 9.5h18" />
        <path data-variant="top-close" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M9.5 17 12 14.5l2.5 2.5" />
        <path data-variant="bottom-open" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.5 4h13A2.5 2.5 0 0 1 21 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5v-11A2.5 2.5 0 0 1 5.5 4Z" />
        <path data-variant="bottom-open" class="fbi-layer fbi-slide-y" style="--delay: 0.00; transform-origin: 12px 12px" d="M3 14.5h18" />
        <path data-variant="bottom-open" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M9.5 10.5 12 8l2.5 2.5" />
        <path data-variant="bottom-close" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.5 4h13A2.5 2.5 0 0 1 21 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5v-11A2.5 2.5 0 0 1 5.5 4Z" />
        <path data-variant="bottom-close" class="fbi-layer fbi-slide-y" style="--delay: 0.00; transform-origin: 12px 12px" d="M3 14.5h18" />
        <path data-variant="bottom-close" class="fbi-layer fbi-none" style="--delay: 0.00; transform-origin: 12px 12px" d="M9.5 8 12 10.5l2.5-2.5" />
      </svg> Panel</button>
    </div>
    <script>
      // A parent (the button) that should drive the icon's hover state gets the .fbi-hot class while hovered.
      document.querySelectorAll(".fbi-hot-target").forEach(function (el) {
        el.addEventListener("pointerenter", function () { el.classList.add("fbi-hot"); });
        el.addEventListener("pointerleave", function () { el.classList.remove("fbi-hot"); });
        el.addEventListener("focus", function () { el.classList.add("fbi-hot"); });
        el.addEventListener("blur", function () { el.classList.remove("fbi-hot"); });
      });
    </script>
  </body>
</html>
Nearby
