/* Basis */
i[class^="icon-"], i[class*=" icon-"] {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-color: currentColor;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  margin-top: -10px;
  margin-bottom: -5px;
}

/* Theme Farben */
body.theme-light i[class^="icon-"],
body.theme-light i[class*=" icon-"] {
  color: #111;
  transition: background-color 0.2s ease;
}

body.theme-light i[class^="icon-"]:hover,
body.theme-light i[class*=" icon-"]:hover {
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}

body.theme-dark i[class^="icon-"],
body.theme-dark i[class*=" icon-"] {
  color: #fff;
  transition: background-color 0.2s ease;
}

body.theme-dark i[class^="icon-"]:hover,
body.theme-dark i[class*=" icon-"]:hover {
  background-color: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
}

/* Icons (SVG als Masken) */

/* ADD */
.icon-add {
  mask-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='white' stroke-width='2' fill='none' stroke-linecap='round'>\
<path d='M12 5v14M5 12h14'/>\
</svg>");
  -webkit-mask-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='white' stroke-width='2' fill='none' stroke-linecap='round'>\
<path d='M12 5v14M5 12h14'/>\
</svg>");
}

/* REMOVE */
.icon-remove {
  mask-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='white' stroke-width='2' fill='none' stroke-linecap='round'>\
<path d='M5 12h14'/>\
</svg>");
  -webkit-mask-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='white' stroke-width='2' fill='none' stroke-linecap='round'>\
<path d='M5 12h14'/>\
</svg>");
}

/* EDIT */
.icon-edit {
  mask-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='white' stroke-width='2' fill='none' stroke-linecap='round'>\
<path d='M4 20l4-1 9-9-3-3-9 9-1 4z'/>\
<path d='M13 6l3 3'/>\
</svg>");
  -webkit-mask-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='white' stroke-width='2' fill='none' stroke-linecap='round'>\
<path d='M4 20l4-1 9-9-3-3-9 9-1 4z'/>\
<path d='M13 6l3 3'/>\
</svg>");
}

/* DELETE */
.icon-del {
  mask-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='white' stroke-width='2' fill='none' stroke-linecap='round'>\
<path d='M3 6h18'/>\
<path d='M8 6V4h8v2'/>\
<path d='M6 6l1 14h10l1-14'/>\
</svg>");
  -webkit-mask-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='white' stroke-width='2' fill='none' stroke-linecap='round'>\
<path d='M3 6h18'/>\
<path d='M8 6V4h8v2'/>\
<path d='M6 6l1 14h10l1-14'/>\
</svg>");
}

/* ENABLE */
.icon-enable {
  mask-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='white' stroke-width='2' fill='none' stroke-linecap='round'>\
<path d='M5 13l4 4L19 7'/>\
</svg>");
  -webkit-mask-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='white' stroke-width='2' fill='none' stroke-linecap='round'>\
<path d='M5 13l4 4L19 7'/>\
</svg>");
}

/* DISABLE */
.icon-disable {
  mask-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='white' stroke-width='2' fill='none' stroke-linecap='round'>\
<path d='M6 6l12 12M18 6l-12 12'/>\
</svg>");
  -webkit-mask-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='white' stroke-width='2' fill='none' stroke-linecap='round'>\
<path d='M6 6l12 12M18 6l-12 12'/>\
</svg>");
}

/* INFO */
.icon-details {
  mask-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='white' stroke-width='2' fill='none' stroke-linecap='round'>\
<circle cx='12' cy='12' r='9'/>\
<path d='M12 16v-4M12 8h.01'/>\
</svg>");
  -webkit-mask-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='white' stroke-width='2' fill='none' stroke-linecap='round'>\
<circle cx='12' cy='12' r='9'/>\
<path d='M12 16v-4M12 8h.01'/>\
</svg>");
}

/* CREATE */
.icon-create {
  mask-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='white' stroke-width='2' fill='none' stroke-linecap='round'>\
<path d='M6 3h9l3 3v15H6z'/>\
<path d='M12 10v6M9 13h6'/>\
</svg>");
  -webkit-mask-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='white' stroke-width='2' fill='none' stroke-linecap='round'>\
<path d='M6 3h9l3 3v15H6z'/>\
<path d='M12 10v6M9 13h6'/>\
</svg>");
}

/* EXPORT */
.icon-export {
  mask-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'>\
<path d='M12 3v12'/>\
<path d='M8 7l4-4 4 4'/>\
<path d='M5 14v5h14v-5'/>\
</svg>");
  -webkit-mask-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'>\
<path d='M12 3v12'/>\
<path d='M8 7l4-4 4 4'/>\
<path d='M5 14v5h14v-5'/>\
</svg>");
}

/* RESET (Zurücksetzen / Reload) */
.icon-reset {
  mask-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'>\
<path d='M3 12a9 9 0 1 0 3-6'/>\
<path d='M3 3v6h6'/>\
</svg>");
  -webkit-mask-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'>\
<path d='M3 12a9 9 0 1 0 3-6'/>\
<path d='M3 3v6h6'/>\
</svg>");
}

/* QR CODE */
.icon-qr {
  mask-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'>\
<rect x='3' y='3' width='6' height='6'/>\
<rect x='15' y='3' width='6' height='6'/>\
<rect x='3' y='15' width='6' height='6'/>\
<path d='M15 15h3v3h-3zM18 18h3v3h-3zM15 18h3'/>\
</svg>");
  -webkit-mask-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'>\
<rect x='3' y='3' width='6' height='6'/>\
<rect x='15' y='3' width='6' height='6'/>\
<rect x='3' y='15' width='6' height='6'/>\
<path d='M15 15h3v3h-3zM18 18h3v3h-3zM15 18h3'/>\
</svg>");
}

/* CANCEL (Kreis mit Querstrich) */
.icon-cancel {
  mask-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'>\
<circle cx='12' cy='12' r='9'/>\
<path d='M7 12h10'/>\
</svg>");
  -webkit-mask-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'>\
<circle cx='12' cy='12' r='9'/>\
<path d='M7 12h10'/>\
</svg>");
}

/* ACTIVE (Haken) */
.icon-active {
  mask-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'>\
<path d='M5 13l4 4L19 7'/>\
</svg>");
  -webkit-mask-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'>\
<path d='M5 13l4 4L19 7'/>\
</svg>");
}

/* INACTIVE (X) */
.icon-inactive {
  mask-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'>\
<path d='M6 6l12 12M18 6l-12 12'/>\
</svg>");
  -webkit-mask-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'>\
<path d='M6 6l12 12M18 6l-12 12'/>\
</svg>");
}

/* LOCATION / MAP MARKER */
.icon-location {
  mask-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'>\
<path d='M12 21s7-5.2 7-11a7 7 0 1 0-14 0c0 5.8 7 11 7 11z'/>\
<circle cx='12' cy='10' r='2'/>\
</svg>");
  -webkit-mask-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'>\
<path d='M12 21s7-5.2 7-11a7 7 0 1 0-14 0c0 5.8 7 11 7 11z'/>\
<circle cx='12' cy='10' r='2'/>\
</svg>");
}

/* SKILL */
.icon-skill {
  mask-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'>\
<path d='M4 4h10l2 4-2 4H4l2-4-2-4z'/>\
<path d='M9 12v8'/>\
<path d='M7 20h4'/>\
</svg>");
  -webkit-mask-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'>\
<path d='M4 4h10l2 4-2 4H4l2-4-2-4z'/>\
<path d='M9 12v8'/>\
<path d='M7 20h4'/>\
</svg>");
}
}