/* A symbol, drawn in one colour.
 *
 * Firmware: gui/common/VectorIcon.hpp - the SVG's own paint is ignored, every
 * shape is filled or stroked with the colour the caller gives, and the
 * drawing is fitted (not stretched) into the middle of its box. Here the SVG
 * is the mask and the colour is the background: `color` on the element, or
 * --icon-colour, is what the symbol wears.
 *
 *   <span class="icon icon-m icon-house at"></span>
 *
 * The files are the firmware's (TouchGFX/assets/images, copied to src/icons).
 * Two symbols are not SVGs there but 24 x 24 bitmaps written out as rows of
 * bits - the plug and the Bluetooth sign - and are the same pixels here. */

.icon {
  background-color: var(--icon-colour, currentColor);
  -webkit-mask: var(--icon-image) center / contain no-repeat;
  mask: var(--icon-image) center / contain no-repeat;
  /* a picture, not a handle: what takes the finger lies over or under it */
  pointer-events: none;
}

/* Layout::ICON_S / ICON_M / ICON_L */
.icon-s { --w: var(--icon-s); --h: var(--icon-s); }
.icon-m { --w: var(--icon-m); --h: var(--icon-m); }
.icon-l { --w: var(--icon-l); --h: var(--icon-l); }

.icon-battery     { --icon-image: url("../../icons/icon_battery.svg"); }
.icon-bluetooth   { --icon-image: url("../../icons/icon_bluetooth.svg"); }
.icon-bulb        { --icon-image: url("../../icons/icon_bulb.svg"); }
.icon-check       { --icon-image: url("../../icons/icon_check.svg"); }
.icon-clock       { --icon-image: url("../../icons/icon_clock.svg"); }
.icon-droplet     { --icon-image: url("../../icons/icon_droplet.svg"); }
.icon-flame       { --icon-image: url("../../icons/icon_flame.svg"); }
.icon-globe       { --icon-image: url("../../icons/icon_globe.svg"); }
.icon-grid        { --icon-image: url("../../icons/icon_grid.svg"); }
.icon-house       { --icon-image: url("../../icons/icon_house.svg"); }
.icon-info        { --icon-image: url("../../icons/icon_info.svg"); }
.icon-monitor     { --icon-image: url("../../icons/icon_monitor.svg"); }
.icon-move        { --icon-image: url("../../icons/icon_move.svg"); }
.icon-power       { --icon-image: url("../../icons/icon_power.svg"); }
.icon-settings    { --icon-image: url("../../icons/icon_settings.svg"); }
.icon-thermometer { --icon-image: url("../../icons/icon_thermometer.svg"); }
.icon-toggle-off  { --icon-image: url("../../icons/icon_toggle_off.svg"); }
.icon-toggle-on   { --icon-image: url("../../icons/icon_toggle_on.svg"); }
.icon-touch       { --icon-image: url("../../icons/icon_touch.svg"); }
.icon-zap         { --icon-image: url("../../icons/icon_zap.svg"); }

/* not the firmware's: the arrow of the Back button */
.icon-chevron-left {
  --icon-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 6l-6 6 6 6'/%3E%3C/svg%3E");
}

/* not the firmware's: a step up and a step down (the firmware writes two triangles) */
.icon-chevron-up {
  --icon-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 14.5l6-6 6 6'/%3E%3C/svg%3E");
}
.icon-chevron-down {
  --icon-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E");
}

/* gui/common/PlugIcon::init, ROWS - bit x of a row is column x */
.icon-plug {
  --icon-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' shape-rendering='crispEdges'%3E%3Cpath d='M8 1h2v1h-2zM14 1h2v1h-2zM8 2h2v1h-2zM14 2h2v1h-2zM8 3h2v1h-2zM14 3h2v1h-2zM8 4h2v1h-2zM14 4h2v1h-2zM8 5h2v1h-2zM14 5h2v1h-2zM8 6h2v1h-2zM14 6h2v1h-2zM6 7h12v1h-12zM5 8h14v1h-14zM5 9h2v1h-2zM17 9h2v1h-2zM5 10h2v1h-2zM17 10h2v1h-2zM5 11h2v1h-2zM17 11h2v1h-2zM5 12h2v1h-2zM17 12h2v1h-2zM5 13h2v1h-2zM17 13h2v1h-2zM5 14h2v1h-2zM17 14h2v1h-2zM6 15h2v1h-2zM16 15h2v1h-2zM6 16h12v1h-12zM8 17h8v1h-8zM11 18h2v1h-2zM11 19h2v1h-2zM11 20h2v1h-2zM11 21h2v1h-2zM11 22h2v1h-2z'/%3E%3C/svg%3E");
}

/* gui/common/BluetoothIcon::init, ROWS */
.icon-bluetooth-sign {
  --icon-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' shape-rendering='crispEdges'%3E%3Cpath d='M11 1h2v1h-2zM11 2h3v1h-3zM11 3h4v1h-4zM11 4h5v1h-5zM11 5h2v1h-2zM14 5h3v1h-3zM6 6h2v1h-2zM11 6h2v1h-2zM15 6h3v1h-3zM6 7h3v1h-3zM11 7h2v1h-2zM15 7h3v1h-3zM7 8h3v1h-3zM11 8h2v1h-2zM14 8h3v1h-3zM8 9h8v1h-8zM9 10h6v1h-6zM10 11h4v1h-4zM10 12h4v1h-4zM9 13h6v1h-6zM8 14h8v1h-8zM7 15h3v1h-3zM11 15h2v1h-2zM14 15h3v1h-3zM6 16h3v1h-3zM11 16h2v1h-2zM15 16h3v1h-3zM6 17h2v1h-2zM11 17h2v1h-2zM15 17h3v1h-3zM11 18h2v1h-2zM14 18h3v1h-3zM11 19h5v1h-5zM11 20h4v1h-4zM11 21h3v1h-3zM11 22h2v1h-2z'/%3E%3C/svg%3E");
}