{% macro queue_add_icon(class_name="queue-add-icon") -%}
  <svg class="{{ class_name }}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"
    aria-hidden="true" focusable="false">
    <path fill="currentColor"
      d="M4 5c-.554 0-1 .446-1 1s.446 1 1 1h15c.554 0 1-.446 1-1s-.446-1-1-1H4zm0 7c-.554 0-1 .446-1 1s.446 1 1 1h18c.554 0 1-.446 1-1s-.446-1-1-1H4zm17.949 5.004c-.343 0-.677.033-1 .1v3.851H17.1c-.066.323-.1.657-.1 1s.034.677.1 1h3.849v3.85c.323.066.657.1 1 .1s.677-.034 1-.1v-3.85h3.852c.066-.323.1-.657.1-1s-.034-.677-.1-1h-3.852v-3.852c-.323-.066-.657-.1-1-.1zM4 19c-.554 0-1 .446-1 1s.446 1 1 1h10c.554 0 1-.446 1-1s-.446-1-1-1H4z" />
  </svg>
{%- endmacro %}

{% macro search_icon(class_name="search-icon") -%}
  <svg class="{{ class_name }}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"
    fill="none" aria-hidden="true" focusable="false">
    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"
      d="m16.75 16.75-3.867-3.867m2.09-5.022a7.111 7.111 0 1 1-14.223 0 7.111 7.111 0 0 1 14.222 0"></path>
  </svg>
{%- endmacro %}

{% macro play_icon(class_name="play-icon") -%}
  <svg class="{{ class_name }}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"
    aria-hidden="true" focusable="false">
    <path fill="currentColor"
      d="M500.203,236.907L30.869,2.24c-6.613-3.285-14.443-2.944-20.736,0.939C3.84,7.083,0,13.931,0,21.333v469.333c0,7.403,3.84,14.251,10.133,18.155c3.413,2.112,7.296,3.179,11.2,3.179c3.264,0,6.528-0.747,9.536-2.24l469.333-234.667C507.435,271.467,512,264.085,512,256S507.435,240.533,500.203,236.907z" />
  </svg>
{%- endmacro %}

{% macro pause_icon(class_name="pause-icon") -%}
  <svg class="{{ class_name }}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"
    aria-hidden="true" focusable="false">
    <path fill="currentColor"
      d="M2.7 1a.7.7 0 0 0-.7.7v12.6a.7.7 0 0 0 .7.7h2.6a.7.7 0 0 0 .7-.7V1.7a.7.7 0 0 0-.7-.7zm8 0a.7.7 0 0 0-.7.7v12.6a.7.7 0 0 0 .7.7h2.6a.7.7 0 0 0 .7-.7V1.7a.7.7 0 0 0-.7-.7z" />
  </svg>
{%- endmacro %}

{% macro playlist_icon(class_name="playlist-icon", filled=false) -%}
  <svg class="{{ class_name }}{% if filled %} playlist-icon-filled{% endif %}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
    aria-hidden="true" focusable="false">
    <path class="playlist-icon-shape"
      d="M5 6.2C5 5.07989 5 4.51984 5.21799 4.09202C5.40973 3.71569 5.71569 3.40973 6.09202 3.21799C6.51984 3 7.07989 3 8.2 3H15.8C16.9201 3 17.4802 3 17.908 3.21799C18.2843 3.40973 18.5903 3.71569 18.782 4.09202C19 4.51984 19 5.07989 19 6.2V21L12 16L5 21V6.2Z"
      fill="{% if filled %}currentColor{% else %}none{% endif %}" stroke="currentColor" stroke-width="2" stroke-linejoin="round" />
  </svg>
{%- endmacro %}

{% macro star_icon(class_name="star-icon", filled=false) -%}
  <svg class="{{ class_name }}{% if filled %} star-icon-filled{% endif %}" width="16" height="16"
    viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"
    aria-hidden="true" focusable="false">
    <path
      d="M11.5245 4.46353C11.6741 4.00287 12.3259 4.00287 12.4755 4.46353L13.9084 8.87336C13.9753 9.07937 14.1673 9.21885 14.3839 9.21885H19.0207C19.505 9.21885 19.7064 9.83866 19.3146 10.1234L15.5633 12.8488C15.3881 12.9761 15.3148 13.2018 15.3817 13.4078L16.8145 17.8176C16.9642 18.2783 16.437 18.6613 16.0451 18.3766L12.2939 15.6512C12.1186 15.5239 11.8814 15.5239 11.7061 15.6512L7.95488 18.3766C7.56303 18.6613 7.03578 18.2783 7.18546 17.8176L8.6183 13.4078C8.68524 13.2018 8.61191 12.9761 8.43667 12.8488L4.68544 10.1234C4.29358 9.83866 4.49497 9.21885 4.97933 9.21885H9.6161C9.83272 9.21885 10.0247 9.07937 10.0916 8.87336L11.5245 4.46353Z"
      fill="{% if filled %}currentColor{% else %}none{% endif %}" stroke="currentColor"
      stroke-linecap="round" stroke-linejoin="round"/>
  </svg>
{%- endmacro %}

{% macro infinity_icon(class_name="duration-infinity-icon") -%}
  <svg class="{{ class_name }}" width="16" height="16" viewBox="0 0 24 24"
    xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
    <path fill="currentColor"
      d="M20.288 9.463a4.856 4.856 0 0 0-4.336-2.3 4.586 4.586 0 0 0-3.343 1.767c.071.116.148.226.212.347l.879 1.652.134-.254a2.71 2.71 0 0 1 2.206-1.519 2.845 2.845 0 1 1 0 5.686 2.708 2.708 0 0 1-2.205-1.518L13.131 12l-1.193-2.26a4.709 4.709 0 0 0-3.89-2.581 4.845 4.845 0 1 0 0 9.682 4.586 4.586 0 0 0 3.343-1.767c-.071-.116-.148-.226-.212-.347l-.879-1.656-.134.254a2.71 2.71 0 0 1-2.206 1.519 2.855 2.855 0 0 1-2.559-1.369 2.825 2.825 0 0 1 0-2.946 2.862 2.862 0 0 1 2.442-1.374h.121a2.708 2.708 0 0 1 2.205 1.518l.7 1.327 1.193 2.26a4.709 4.709 0 0 0 3.89 2.581h.209a4.846 4.846 0 0 0 4.127-7.378z" />
  </svg>
{%- endmacro %}

{% macro delete_icon(class_name="delete-icon") -%}
  <svg class="{{ class_name }}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
    aria-hidden="true" focusable="false">
    <path d="M10 12V17" stroke="currentColor" stroke-width="2" stroke-linecap="round"
      stroke-linejoin="round" />
    <path d="M14 12V17" stroke="currentColor" stroke-width="2" stroke-linecap="round"
      stroke-linejoin="round" />
    <path d="M4 7H20" stroke="currentColor" stroke-width="2" stroke-linecap="round"
      stroke-linejoin="round" />
    <path d="M6 10V18C6 19.6569 7.34315 21 9 21H15C16.6569 21 18 19.6569 18 18V10" stroke="currentColor"
      stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
    <path d="M9 5C9 3.89543 9.89543 3 11 3H13C14.1046 3 15 3.89543 15 5V7H9V5Z" stroke="currentColor"
      stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
  </svg>
{%- endmacro %}

{% macro playlist_cover(class_name="playlist-cover-svg") -%}
  <svg class="{{ class_name }}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 760"
    width="1200" height="760" aria-hidden="true" focusable="false">
    <defs>
      <pattern id="playlist-cover-grid" width="24" height="18" patternUnits="userSpaceOnUse">
        <path d="M24 0H0V18" fill="none" stroke="#2b2b2b" stroke-width="1"/>
        <path d="M0 9H24M12 0V18" stroke="#202020" stroke-width=".8"/>
      </pattern>
      <pattern id="playlist-cover-ribbed" width="1" height="7" patternUnits="userSpaceOnUse">
        <path d="M0 0H1" stroke="#3a3a3a" stroke-width="1"/>
      </pattern>
    </defs>
    <rect x="45" y="55" width="1110" height="650" rx="28" fill="#101010" stroke="#050505" stroke-width="8"/>
    <rect x="65" y="72" width="1070" height="610" rx="16" fill="url(#playlist-cover-grid)" opacity=".85"/>
    <g fill="#151515" stroke="#050505" stroke-width="5">
      <circle cx="88" cy="88" r="24"/><circle cx="1112" cy="88" r="24"/>
      <circle cx="88" cy="672" r="24"/><circle cx="1112" cy="672" r="24"/>
      <circle cx="600" cy="590" r="19"/>
    </g>
    <rect x="105" y="120" width="990" height="150" rx="10" fill="#f6f0e6" stroke="#222" stroke-width="4"/>
    <rect x="140" y="155" width="70" height="70" fill="#4b201e"/>
    <text x="175" y="208" text-anchor="middle" font-family="Arial" font-size="58" font-weight="700" fill="#fff">A</text>
    <line x1="250" y1="170" x2="1015" y2="170" stroke="#5b2525" stroke-width="3"/>
    <line x1="250" y1="205" x2="1015" y2="205" stroke="#5b2525" stroke-width="3"/>
    <line x1="250" y1="240" x2="1015" y2="240" stroke="#5b2525" stroke-width="3"/>
    <rect x="105" y="280" width="990" height="220" fill="#111" stroke="#050505" stroke-width="5"/>
    <rect x="105" y="280" width="990" height="220" fill="url(#playlist-cover-ribbed)" opacity=".9"/>
    <circle cx="355" cy="390" r="72" fill="#050505"/>
    <circle cx="355" cy="390" r="58" fill="#d8d8d8"/>
    <circle cx="845" cy="390" r="72" fill="#050505"/>
    <circle cx="845" cy="390" r="58" fill="#d8d8d8"/>
    <rect x="480" y="308" width="240" height="164" fill="#0b0b0b" stroke="#050505" stroke-width="6"/>
    <rect x="105" y="515" width="990" height="76" rx="8" fill="#dfca96" stroke="#222" stroke-width="4"/>
  </svg>
{%- endmacro %}