Mixer Vertical

// Generated by @svg-animated-icons/cli
// You own this file — edit it freely.

import React from "react";

type Props = {
  disableHover?: boolean;
  className?: string;
};

export function MixerVerticalIcon({ disableHover, className }: Props) {
  const classes = [
    "ai-mixer-vertical-icon",
    disableHover ? "no-hover" : "",
    className ?? "",
  ]
    .filter(Boolean)
    .join(" ");

  return (
    <>
      <style>{`
.ai-mixer-vertical-icon {
  width: 1em;
  height: 1em;
  display: inline-block;
  cursor: pointer;
  overflow: visible;
}

.ai-mixer-vertical-icon * {
  transform-box: fill-box;
}

.ai-mixer-vertical-icon.no-hover * {
  transform: none;
  opacity: 1;
  animation: none;
}

.ai-mixer-vertical-icon .knob-left,
.ai-mixer-vertical-icon .knob-right,
.ai-mixer-vertical-icon .cutout-left,
.ai-mixer-vertical-icon .cutout-right {
  transform-box: view-box;
}

.ai-mixer-vertical-icon:not(.no-hover):hover .knob-left,
.ai-mixer-vertical-icon:not(.no-hover):hover .cutout-left {
  animation: ai-mixer-vertical-slide-left 700ms ease-in-out;
}

.ai-mixer-vertical-icon:not(.no-hover):hover .knob-right,
.ai-mixer-vertical-icon:not(.no-hover):hover .cutout-right {
  animation: ai-mixer-vertical-slide-right 700ms ease-in-out;
}

@keyframes ai-mixer-vertical-slide-left {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

@keyframes ai-mixer-vertical-slide-right {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(2px); }
}
`}</style>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        className={classes}
        viewBox="0 0 15 15"
        fill="none"
      >
        <defs>
          <mask id="ai-mixer-vertical-mask">
            <rect width="15" height="15" fill="white"/>
            <circle className="cutout-left" cx="4.5" cy="9.5" r="1.5" fill="black"/>
            <circle className="cutout-right" cx="10.5" cy="5.5" r="1.5" fill="black"/>
          </mask>
        </defs>
        <g mask="url(#ai-mixer-vertical-mask)">
          <path className="track-left" d="M4 1.5C4 1.22386 4.22386 1 4.5 1C4.77614 1 5 1.22386 5 1.5V13.5C5 13.7761 4.77614 14 4.5 14C4.22386 14 4 13.7761 4 13.5V1.5Z" fill="currentColor"/>
          <path className="track-right" d="M10 1.5C10 1.22386 10.2239 1 10.5 1C10.7761 1 11 1.22386 11 1.5V13.5C11 13.7761 10.7761 14 10.5 14C10.2239 14 10 13.7761 10 13.5V1.5Z" fill="currentColor"/>
        </g>
        <path className="knob-left" fillRule="evenodd" d="M4.5 7C5.88071 7 7 8.11929 7 9.5C7 10.8807 5.88071 12 4.5 12C3.11929 12 2 10.8807 2 9.5C2 8.11929 3.11929 7 4.5 7ZM4.5 8C3.67157 8 3 8.67157 3 9.5C3 10.3284 3.67157 11 4.5 11C5.32843 11 6 10.3284 6 9.5C6 8.67157 5.32843 8 4.5 8Z" fill="currentColor"/>
        <path className="knob-right" fillRule="evenodd" d="M10.5 3C11.8807 3 13 4.11929 13 5.5C13 6.88071 11.8807 8 10.5 8C9.11929 8 8 6.88071 8 5.5C8 4.11929 9.11929 3 10.5 3ZM10.5 4C9.67157 4 9 4.67157 9 5.5C9 6.32843 9.67157 7 10.5 7C11.3284 7 12 6.32843 12 5.5C12 4.67157 11.3284 4 10.5 4Z" fill="currentColor"/>
      </svg>
    </>
  );
}