import { html, svg } from 'lit';

/**
 * SVG icons as Lit html template functions.
 * Port of Icons.tsx from player-react.
 */
const playIcon = (size = 16, color = "currentColor") => html `
  <svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" aria-hidden="true">
    <path d="M8 5v14l11-7z" fill="${color}" />
  </svg>
`;
const pauseIcon = (size = 16, color = "currentColor") => html `
  <svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" aria-hidden="true">
    <rect x="6" y="4" width="4" height="16" fill="${color}" />
    <rect x="14" y="4" width="4" height="16" fill="${color}" />
  </svg>
`;
const skipBackIcon = (size = 16, color = "currentColor") => html `
  <svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" aria-hidden="true">
    <path
      d="M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z"
      fill="${color}"
    />
    ${svg `<text x="12" y="15" font-size="7" font-weight="bold" fill="${color}" text-anchor="middle">10</text>`}
  </svg>
`;
const skipForwardIcon = (size = 16, color = "currentColor") => html `
  <svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" aria-hidden="true">
    <path
      d="M12 5V1l5 5-5 5V7c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6h2c0 4.42-3.58 8-8 8s-8-3.58-8-8 3.58-8 8-8z"
      fill="${color}"
    />
    ${svg `<text x="12" y="15" font-size="7" font-weight="bold" fill="${color}" text-anchor="middle">10</text>`}
  </svg>
`;
const volumeUpIcon = (size = 16, color = "currentColor") => html `
  <svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" aria-hidden="true">
    <polygon points="11,5 6,9 2,9 2,15 6,15 11,19" fill="${color}" />
    <path
      d="M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07"
      stroke="${color}"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
    />
  </svg>
`;
const volumeOffIcon = (size = 16, color = "currentColor") => html `
  <svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" aria-hidden="true">
    <polygon points="11,5 6,9 2,9 2,15 6,15 11,19" fill="${color}" />
    <line
      x1="23"
      y1="9"
      x2="17"
      y2="15"
      stroke="${color}"
      stroke-width="2"
      stroke-linecap="round"
    />
    <line
      x1="17"
      y1="9"
      x2="23"
      y2="15"
      stroke="${color}"
      stroke-width="2"
      stroke-linecap="round"
    />
  </svg>
`;
const fullscreenIcon = (size = 16, color = "currentColor") => html `
  <svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" aria-hidden="true">
    <path
      d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3M3 16v3a2 2 0 0 0 2 2h3m8 0h3a2 2 0 0 0 2-2v-3"
      stroke="${color}"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
    />
  </svg>
`;
const fullscreenExitIcon = (size = 16, color = "currentColor") => html `
  <svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" aria-hidden="true">
    <path
      d="M8 3v3a2 2 0 0 1-2 2H3M21 8h-3a2 2 0 0 1-2-2V3M3 16h3a2 2 0 0 1 2 2v3M16 21v-3a2 2 0 0 1 2-2h3"
      stroke="${color}"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
    />
  </svg>
`;
const pictureInPictureIcon = (size = 16, color = "currentColor") => html `
  <svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" aria-hidden="true">
    <rect
      x="2"
      y="3"
      width="20"
      height="14"
      rx="2"
      ry="2"
      stroke="${color}"
      stroke-width="2"
      fill="none"
    />
    <rect x="8" y="10" width="10" height="6" rx="1" ry="1" fill="${color}" />
  </svg>
`;
const settingsIcon = (size = 16, color = "currentColor") => html `
  <svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" aria-hidden="true">
    <path
      d="M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z"
      stroke="${color}"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
    />
    <path
      d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1Z"
      stroke="${color}"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
    />
  </svg>
`;
const statsIcon = (size = 16, color = "currentColor") => html `
  <svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" aria-hidden="true">
    <rect x="4" y="13" width="4" height="7" fill="${color}" />
    <rect x="10" y="9" width="4" height="11" fill="${color}" />
    <rect x="16" y="4" width="4" height="16" fill="${color}" />
  </svg>
`;
const seekToLiveIcon = (size = 16, color = "currentColor") => html `
  <svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" aria-hidden="true">
    <path d="M5 5v14l11-7z" fill="${color}" />
    <rect x="17" y="5" width="3" height="14" fill="${color}" />
  </svg>
`;
const closeIcon = (size = 12, color = "currentColor") => html `
  <svg width="${size}" height="${size}" viewBox="0 0 12 12" fill="none" aria-hidden="true">
    <path d="M9 3L3 9M3 3L9 9" stroke="${color}" stroke-width="1.5" stroke-linecap="round" />
  </svg>
`;
const loopIcon = (size = 14, color = "currentColor") => html `
  <svg
    width="${size}"
    height="${size}"
    viewBox="0 0 24 24"
    fill="none"
    stroke="${color}"
    stroke-width="2"
    stroke-linecap="round"
    stroke-linejoin="round"
    aria-hidden="true"
  >
    <polyline points="17 1 21 5 17 9"></polyline>
    <path d="M3 11V9a4 4 0 0 1 4-4h14"></path>
    <polyline points="7 23 3 19 7 15"></polyline>
    <path d="M21 13v2a4 4 0 0 1-4 4H3"></path>
  </svg>
`;

export { closeIcon, fullscreenExitIcon, fullscreenIcon, loopIcon, pauseIcon, pictureInPictureIcon, playIcon, seekToLiveIcon, settingsIcon, skipBackIcon, skipForwardIcon, statsIcon, volumeOffIcon, volumeUpIcon };
//# sourceMappingURL=index.js.map
