const ChartMiddleOBRight = ({ className }: { className?: string }) => {
  return (
    <svg
      className={`${className}`}
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 106 60"
      fill="none"
    >
      <rect width="106" height="60" rx="4" fill="var(---bkg-1)" />
      <rect x="2" y="2" width="102" height="4" rx="2" fill="var(--bkg-2)" />
      <rect x="86" y="8" width="18" height="50" rx="2" fill="var(--bkg-2)" />
      <rect
        x="98"
        y="10"
        width="2"
        height="12"
        transform="rotate(90 98 10)"
        fill="var(--down)"
      />
      <rect
        x="98"
        y="54"
        width="2"
        height="12"
        transform="rotate(90 98 54)"
        fill="var(--up)"
      />
      <rect
        x="96"
        y="14"
        width="2"
        height="10"
        transform="rotate(90 96 14)"
        fill="var(--down)"
      />
      <rect
        x="96"
        y="50"
        width="2"
        height="10"
        transform="rotate(90 96 50)"
        fill="var(--up)"
      />
      <rect
        x="94"
        y="18"
        width="2"
        height="8"
        transform="rotate(90 94 18)"
        fill="var(--down)"
      />
      <rect
        x="94"
        y="46"
        width="2"
        height="8"
        transform="rotate(90 94 46)"
        fill="var(--up)"
      />
      <rect
        x="92"
        y="22"
        width="2"
        height="6"
        transform="rotate(90 92 22)"
        fill="var(--down)"
      />
      <rect
        x="92"
        y="42"
        width="2"
        height="6"
        transform="rotate(90 92 42)"
        fill="var(--up)"
      />
      <rect
        x="90"
        y="26"
        width="2"
        height="4"
        transform="rotate(90 90 26)"
        fill="var(--down)"
      />
      <rect
        x="90"
        y="38"
        width="2"
        height="4"
        transform="rotate(90 90 38)"
        fill="var(--up)"
      />
      <rect
        x="88"
        y="30"
        width="2"
        height="2"
        transform="rotate(90 88 30)"
        fill="var(--down)"
      />
      <rect
        x="88"
        y="34"
        width="2"
        height="2"
        transform="rotate(90 88 34)"
        fill="var(--up)"
      />
      <rect x="2" y="8" width="18" height="50" rx="2" fill="var(--bkg-2)" />
      <rect
        x="10"
        y="10"
        width="2"
        height="6"
        transform="rotate(90 10 10)"
        fill="var(--fgd-4)"
      />
      <rect
        x="18"
        y="14"
        width="2"
        height="14"
        transform="rotate(90 18 14)"
        fill="var(--fgd-4)"
      />
      <rect
        x="18"
        y="26"
        width="2"
        height="14"
        transform="rotate(90 18 26)"
        fill="var(--fgd-4)"
      />
      <rect
        x="18"
        y="18"
        width="4"
        height="14"
        transform="rotate(90 18 18)"
        fill="var(--fgd-4)"
      />
      <rect
        x="18"
        y="10"
        width="2"
        height="6"
        transform="rotate(90 18 10)"
        fill="var(--fgd-4)"
      />
      <rect x="22" y="44" width="62" height="14" rx="2" fill="var(--bkg-2)" />
      <rect
        x="38"
        y="48"
        width="2"
        height="12"
        transform="rotate(90 38 48)"
        fill="var(--fgd-4)"
      />
      <rect
        x="38"
        y="52"
        width="2"
        height="12"
        transform="rotate(90 38 52)"
        fill="var(--fgd-4)"
      />
      <rect
        x="52"
        y="48"
        width="2"
        height="12"
        transform="rotate(90 52 48)"
        fill="var(--fgd-4)"
      />
      <rect
        x="52"
        y="52"
        width="2"
        height="12"
        transform="rotate(90 52 52)"
        fill="var(--fgd-4)"
      />
      <rect
        x="66"
        y="48"
        width="2"
        height="12"
        transform="rotate(90 66 48)"
        fill="var(--fgd-4)"
      />
      <rect
        x="66"
        y="52"
        width="2"
        height="12"
        transform="rotate(90 66 52)"
        fill="var(--fgd-4)"
      />
      <rect
        x="80"
        y="48"
        width="2"
        height="12"
        transform="rotate(90 80 48)"
        fill="var(--fgd-4)"
      />
      <rect
        x="80"
        y="52"
        width="2"
        height="12"
        transform="rotate(90 80 52)"
        fill="var(--fgd-4)"
      />
      <rect x="22" y="8" width="62" height="34" rx="2" fill="var(--bkg-2)" />
      <rect x="26" y="29" width="2" height="7" fill="var(--up)" />
      <rect x="30" y="25" width="2" height="7" fill="var(--up)" />
      <rect x="38" y="23" width="2" height="7" fill="var(--down)" />
      <rect x="50" y="21" width="2" height="7" fill="var(--up)" />
      <rect x="58" y="16" width="2" height="7" fill="var(--up)" />
      <rect x="70" y="17" width="2" height="7" fill="var(--up)" />
      <rect x="34" y="25" width="2" height="3" fill="var(--down)" />
      <rect x="42" y="28" width="2" height="3" fill="var(--up)" />
      <rect x="46" y="27" width="2" height="3" fill="var(--down)" />
      <rect x="54" y="21" width="2" height="3" fill="var(--down)" />
      <rect x="62" y="18" width="2" height="3" fill="var(--down)" />
      <rect x="66" y="20" width="2" height="3" fill="var(--down)" />
      <rect x="74" y="16" width="2" height="3" fill="var(--down)" />
      <rect x="78" y="17" width="2" height="3" fill="var(--down)" />
    </svg>
  )
}

export default ChartMiddleOBRight