@use "../../variables/index" as *;

/**
 * C8Y Icons - SVG mask-image based dual-tone icons (GENERATED FILE)
 *
 * Auto-generated by c8y-icons/generate.mjs
 * DO NOT EDIT MANUALLY
 */

$icon-dir: if(sass($use-relative-paths): '../../assets/icons'; else: 'assets/icons');
$asset-directory: if(sass($use-relative-paths): '../../assets'; else: 'assets');

@if $use-svg-icons {
.c8y-icon {
  position: relative;
  display: inline-block;
  line-height: 1;
  padding: 0;
  min-width: 1em;

  &:not([class^="fa-"]):not([class*=" fa-"]):not([class^="app-img-icon"]):not([class*=" app-img-icon"]):not([class^="dlt-c8y-icon-"]):not([class*=" dlt-c8y-icon-"])::before {
    content: "";
    display: inline-block;
    width: 1.1em;
    height: 1.1em;
    line-height: 1;
    vertical-align: top;
    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;
    text-rendering: optimizeLegibility;
  }

  &:not([class^="fa-"]):not([class*=" fa-"]):not([class^="app-img-icon"]):not([class*=" app-img-icon"]):not([class^="dlt-c8y-icon-"]):not([class*=" dlt-c8y-icon-"])::after {
    content: "";
    display: inline-block;
    width: 1.1em;
    height: 1.1em;
    line-height: 1;
    background-color: var(--_c8y-after-bg, transparent);
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
  }
}

.c8y-icon-white {
  &::before { color: $icon-white-color-dark; }
  &::after { color: $icon-white-color-light; }
}

.c8y-icon-duocolor {
  &::before { color: $icon-dark-color-dark; }
  &.text-danger::before { color: var(--palette-status-danger, var(--c8y-palette-status-danger)); }
  &.text-warning::before { color: var(--palette-status-warning, var(--c8y-palette-status-warning)); }
  &.text-info::before { color: var(--palette-status-info, var(--c8y-palette-status-info)); }
  &.text-success::before { color: var(--palette-status-success, var(--c8y-palette-status-success)); }
  &.text-muted::before { color: $text-muted; }
  &::after { color: $icon-dark-color-light; }
}

.c8y-icon-c8y {
  --_c8y-dark: url("#{$icon-dir}/c8y-dark/c8y.svg");
  &::before {
    mask-image: var(--_c8y-dark);
    -webkit-mask-image: var(--_c8y-dark);
  }
}
.c8y-icon-c8y-c {
  --_c8y-dark: url("#{$icon-dir}/c8y-dark/c8y-c.svg");
  &::before {
    mask-image: var(--_c8y-dark);
    -webkit-mask-image: var(--_c8y-dark);
  }
}
.c8y-icon-c8y-data {
  --_c8y-dark: url("#{$icon-dir}/c8y-dark/c8y-data.svg");
  --_c8y-light: url("#{$icon-dir}/c8y-light/c8y-data.svg");
  &::before {
    mask-image: var(--_c8y-dark);
    -webkit-mask-image: var(--_c8y-dark);
  }
  &::after {
    --_c8y-after-bg: currentColor;
    mask-image: var(--_c8y-light);
    -webkit-mask-image: var(--_c8y-light);
  }
}
.c8y-icon-c8y-support {
  --_c8y-dark: url("#{$icon-dir}/c8y-dark/c8y-support.svg");
  --_c8y-light: url("#{$icon-dir}/c8y-light/c8y-support.svg");
  &::before {
    mask-image: var(--_c8y-dark);
    -webkit-mask-image: var(--_c8y-dark);
  }
  &::after {
    --_c8y-after-bg: currentColor;
    mask-image: var(--_c8y-light);
    -webkit-mask-image: var(--_c8y-light);
  }
}
.c8y-icon-cockpit {
  --_c8y-dark: url("#{$icon-dir}/c8y-dark/cockpit.svg");
  --_c8y-light: url("#{$icon-dir}/c8y-light/cockpit.svg");
  &::before {
    mask-image: var(--_c8y-dark);
    -webkit-mask-image: var(--_c8y-dark);
  }
  &::after {
    --_c8y-after-bg: currentColor;
    mask-image: var(--_c8y-light);
    -webkit-mask-image: var(--_c8y-light);
  }
}
.c8y-icon-administration {
  --_c8y-dark: url("#{$icon-dir}/c8y-dark/administration.svg");
  --_c8y-light: url("#{$icon-dir}/c8y-light/administration.svg");
  &::before {
    mask-image: var(--_c8y-dark);
    -webkit-mask-image: var(--_c8y-dark);
  }
  &::after {
    --_c8y-after-bg: currentColor;
    mask-image: var(--_c8y-light);
    -webkit-mask-image: var(--_c8y-light);
  }
}
.c8y-icon-data-prep {
  --_c8y-dark: url("#{$icon-dir}/c8y-dark/data-prep.svg");
  --_c8y-light: url("#{$icon-dir}/c8y-light/data-prep.svg");
  &::before {
    mask-image: var(--_c8y-dark);
    -webkit-mask-image: var(--_c8y-dark);
  }
  &::after {
    --_c8y-after-bg: currentColor;
    mask-image: var(--_c8y-light);
    -webkit-mask-image: var(--_c8y-light);
  }
}
.c8y-icon-data-prep-inbound {
  --_c8y-dark: url("#{$icon-dir}/c8y-dark/data-prep-inbound.svg");
  --_c8y-light: url("#{$icon-dir}/c8y-light/data-prep-inbound.svg");
  &::before {
    mask-image: var(--_c8y-dark);
    -webkit-mask-image: var(--_c8y-dark);
  }
  &::after {
    --_c8y-after-bg: currentColor;
    mask-image: var(--_c8y-light);
    -webkit-mask-image: var(--_c8y-light);
  }
}
.c8y-icon-data-prep-outbound {
  --_c8y-dark: url("#{$icon-dir}/c8y-dark/data-prep-outbound.svg");
  --_c8y-light: url("#{$icon-dir}/c8y-light/data-prep-outbound.svg");
  &::before {
    mask-image: var(--_c8y-dark);
    -webkit-mask-image: var(--_c8y-dark);
  }
  &::after {
    --_c8y-after-bg: currentColor;
    mask-image: var(--_c8y-light);
    -webkit-mask-image: var(--_c8y-light);
  }
}
.c8y-icon-device-data-in {
  --_c8y-dark: url("#{$icon-dir}/c8y-dark/device-data-in.svg");
  --_c8y-light: url("#{$icon-dir}/c8y-light/device-data-in.svg");
  &::before {
    mask-image: var(--_c8y-dark);
    -webkit-mask-image: var(--_c8y-dark);
  }
  &::after {
    --_c8y-after-bg: currentColor;
    mask-image: var(--_c8y-light);
    -webkit-mask-image: var(--_c8y-light);
  }
}
.c8y-icon-device-data-out {
  --_c8y-dark: url("#{$icon-dir}/c8y-dark/device-data-out.svg");
  --_c8y-light: url("#{$icon-dir}/c8y-light/device-data-out.svg");
  &::before {
    mask-image: var(--_c8y-dark);
    -webkit-mask-image: var(--_c8y-dark);
  }
  &::after {
    --_c8y-after-bg: currentColor;
    mask-image: var(--_c8y-light);
    -webkit-mask-image: var(--_c8y-light);
  }
}
.c8y-icon-enterprise {
  --_c8y-dark: url("#{$icon-dir}/c8y-dark/enterprise.svg");
  --_c8y-light: url("#{$icon-dir}/c8y-light/enterprise.svg");
  &::before {
    mask-image: var(--_c8y-dark);
    -webkit-mask-image: var(--_c8y-dark);
  }
  &::after {
    --_c8y-after-bg: currentColor;
    mask-image: var(--_c8y-light);
    -webkit-mask-image: var(--_c8y-light);
  }
}
.c8y-icon-saas {
  --_c8y-dark: url("#{$icon-dir}/c8y-dark/saas.svg");
  --_c8y-light: url("#{$icon-dir}/c8y-light/saas.svg");
  &::before {
    mask-image: var(--_c8y-dark);
    -webkit-mask-image: var(--_c8y-dark);
  }
  &::after {
    --_c8y-after-bg: currentColor;
    mask-image: var(--_c8y-light);
    -webkit-mask-image: var(--_c8y-light);
  }
}
.c8y-icon-rocket {
  --_c8y-dark: url("#{$icon-dir}/c8y-dark/rocket.svg");
  --_c8y-light: url("#{$icon-dir}/c8y-light/rocket.svg");
  &::before {
    mask-image: var(--_c8y-dark);
    -webkit-mask-image: var(--_c8y-dark);
  }
  &::after {
    --_c8y-after-bg: currentColor;
    mask-image: var(--_c8y-light);
    -webkit-mask-image: var(--_c8y-light);
  }
}
.c8y-icon-cloud-container {
  --_c8y-dark: url("#{$icon-dir}/c8y-dark/cloud-container.svg");
  --_c8y-light: url("#{$icon-dir}/c8y-light/cloud-container.svg");
  &::before {
    mask-image: var(--_c8y-dark);
    -webkit-mask-image: var(--_c8y-dark);
  }
  &::after {
    --_c8y-after-bg: currentColor;
    mask-image: var(--_c8y-light);
    -webkit-mask-image: var(--_c8y-light);
  }
}
.c8y-icon-smart-function {
  --_c8y-dark: url("#{$icon-dir}/c8y-dark/smart-function.svg");
  --_c8y-light: url("#{$icon-dir}/c8y-light/smart-function.svg");
  &::before {
    mask-image: var(--_c8y-dark);
    -webkit-mask-image: var(--_c8y-dark);
  }
  &::after {
    --_c8y-after-bg: currentColor;
    mask-image: var(--_c8y-light);
    -webkit-mask-image: var(--_c8y-light);
  }
}
.c8y-icon-solution-accelerator {
  --_c8y-dark: url("#{$icon-dir}/c8y-dark/solution-accelerator.svg");
  --_c8y-light: url("#{$icon-dir}/c8y-light/solution-accelerator.svg");
  &::before {
    mask-image: var(--_c8y-dark);
    -webkit-mask-image: var(--_c8y-dark);
  }
  &::after {
    --_c8y-after-bg: currentColor;
    mask-image: var(--_c8y-light);
    -webkit-mask-image: var(--_c8y-light);
  }
}
.c8y-icon-circle-star {
  --_c8y-dark: url("#{$icon-dir}/c8y-dark/circle-star.svg");
  --_c8y-light: url("#{$icon-dir}/c8y-light/circle-star.svg");
  &::before {
    mask-image: var(--_c8y-dark);
    -webkit-mask-image: var(--_c8y-dark);
  }
  &::after {
    --_c8y-after-bg: currentColor;
    mask-image: var(--_c8y-light);
    -webkit-mask-image: var(--_c8y-light);
  }
}
.c8y-icon-dashboard-alt {
  --_c8y-dark: url("#{$icon-dir}/c8y-dark/dashboard-alt.svg");
  --_c8y-light: url("#{$icon-dir}/c8y-light/dashboard-alt.svg");
  &::before {
    mask-image: var(--_c8y-dark);
    -webkit-mask-image: var(--_c8y-dark);
  }
  &::after {
    --_c8y-after-bg: currentColor;
    mask-image: var(--_c8y-light);
    -webkit-mask-image: var(--_c8y-light);
  }
}
.c8y-icon-analytics-builder {
  --_c8y-dark: url("#{$icon-dir}/c8y-dark/analytics-builder.svg");
  --_c8y-light: url("#{$icon-dir}/c8y-light/analytics-builder.svg");
  &::before {
    mask-image: var(--_c8y-dark);
    -webkit-mask-image: var(--_c8y-dark);
  }
  &::after {
    --_c8y-after-bg: currentColor;
    mask-image: var(--_c8y-light);
    -webkit-mask-image: var(--_c8y-light);
  }
}
.c8y-icon-analytic-model {
  --_c8y-dark: url("#{$icon-dir}/c8y-dark/analytic-model.svg");
  --_c8y-light: url("#{$icon-dir}/c8y-light/analytic-model.svg");
  &::before {
    mask-image: var(--_c8y-dark);
    -webkit-mask-image: var(--_c8y-dark);
  }
  &::after {
    --_c8y-after-bg: currentColor;
    mask-image: var(--_c8y-light);
    -webkit-mask-image: var(--_c8y-light);
  }
}
.c8y-icon-aab-icon-model {
  --_c8y-dark: url("#{$icon-dir}/c8y-dark/aab-icon-model.svg");
  --_c8y-light: url("#{$icon-dir}/c8y-light/aab-icon-model.svg");
  &::before {
    mask-image: var(--_c8y-dark);
    -webkit-mask-image: var(--_c8y-dark);
  }
  &::after {
    --_c8y-after-bg: currentColor;
    mask-image: var(--_c8y-light);
    -webkit-mask-image: var(--_c8y-light);
  }
}
.c8y-icon-aab-icon-template-model {
  --_c8y-dark: url("#{$icon-dir}/c8y-dark/aab-icon-template-model.svg");
  --_c8y-light: url("#{$icon-dir}/c8y-light/aab-icon-template-model.svg");
  &::before {
    mask-image: var(--_c8y-dark);
    -webkit-mask-image: var(--_c8y-dark);
  }
  &::after {
    --_c8y-after-bg: currentColor;
    mask-image: var(--_c8y-light);
    -webkit-mask-image: var(--_c8y-light);
  }
}
.c8y-icon-data-broker {
  --_c8y-dark: url("#{$icon-dir}/c8y-dark/data-broker.svg");
  --_c8y-light: url("#{$icon-dir}/c8y-light/data-broker.svg");
  &::before {
    mask-image: var(--_c8y-dark);
    -webkit-mask-image: var(--_c8y-dark);
  }
  &::after {
    --_c8y-after-bg: currentColor;
    mask-image: var(--_c8y-light);
    -webkit-mask-image: var(--_c8y-light);
  }
}
.c8y-icon-data-explorer {
  --_c8y-dark: url("#{$icon-dir}/c8y-dark/data-explorer.svg");
  --_c8y-light: url("#{$icon-dir}/c8y-light/data-explorer.svg");
  &::before {
    mask-image: var(--_c8y-dark);
    -webkit-mask-image: var(--_c8y-dark);
  }
  &::after {
    --_c8y-after-bg: currentColor;
    mask-image: var(--_c8y-light);
    -webkit-mask-image: var(--_c8y-light);
  }
}
.c8y-icon-data-hub {
  --_c8y-dark: url("#{$icon-dir}/c8y-dark/data-hub.svg");
  --_c8y-light: url("#{$icon-dir}/c8y-light/data-hub.svg");
  &::before {
    mask-image: var(--_c8y-dark);
    -webkit-mask-image: var(--_c8y-dark);
  }
  &::after {
    --_c8y-after-bg: currentColor;
    mask-image: var(--_c8y-light);
    -webkit-mask-image: var(--_c8y-light);
  }
}
.c8y-icon-data-points {
  --_c8y-dark: url("#{$icon-dir}/c8y-dark/data-points.svg");
  --_c8y-light: url("#{$icon-dir}/c8y-light/data-points.svg");
  &::before {
    mask-image: var(--_c8y-dark);
    -webkit-mask-image: var(--_c8y-dark);
  }
  &::after {
    --_c8y-after-bg: currentColor;
    mask-image: var(--_c8y-light);
    -webkit-mask-image: var(--_c8y-light);
  }
}
.c8y-icon-chart {
  --_c8y-dark: url("#{$icon-dir}/c8y-dark/chart.svg");
  --_c8y-light: url("#{$icon-dir}/c8y-light/chart.svg");
  &::before {
    mask-image: var(--_c8y-dark);
    -webkit-mask-image: var(--_c8y-dark);
  }
  &::after {
    --_c8y-after-bg: currentColor;
    mask-image: var(--_c8y-light);
    -webkit-mask-image: var(--_c8y-light);
  }
}
.c8y-icon-report {
  --_c8y-dark: url("#{$icon-dir}/c8y-dark/report.svg");
  --_c8y-light: url("#{$icon-dir}/c8y-light/report.svg");
  &::before {
    mask-image: var(--_c8y-dark);
    -webkit-mask-image: var(--_c8y-dark);
  }
  &::after {
    --_c8y-after-bg: currentColor;
    mask-image: var(--_c8y-light);
    -webkit-mask-image: var(--_c8y-light);
  }
}
.c8y-icon-reports {
  --_c8y-dark: url("#{$icon-dir}/c8y-dark/reports.svg");
  --_c8y-light: url("#{$icon-dir}/c8y-light/reports.svg");
  &::before {
    mask-image: var(--_c8y-dark);
    -webkit-mask-image: var(--_c8y-dark);
  }
  &::after {
    --_c8y-after-bg: currentColor;
    mask-image: var(--_c8y-light);
    -webkit-mask-image: var(--_c8y-light);
  }
}
.c8y-icon-overviews {
  --_c8y-dark: url("#{$icon-dir}/c8y-dark/overviews.svg");
  --_c8y-light: url("#{$icon-dir}/c8y-light/overviews.svg");
  &::before {
    mask-image: var(--_c8y-dark);
    -webkit-mask-image: var(--_c8y-dark);
  }
  &::after {
    --_c8y-after-bg: currentColor;
    mask-image: var(--_c8y-light);
    -webkit-mask-image: var(--_c8y-light);
  }
}
.c8y-icon-usage-statistics {
  --_c8y-dark: url("#{$icon-dir}/c8y-dark/usage-statistics.svg");
  --_c8y-light: url("#{$icon-dir}/c8y-light/usage-statistics.svg");
  &::before {
    mask-image: var(--_c8y-dark);
    -webkit-mask-image: var(--_c8y-dark);
  }
  &::after {
    --_c8y-after-bg: currentColor;
    mask-image: var(--_c8y-light);
    -webkit-mask-image: var(--_c8y-light);
  }
}
.c8y-icon-e2e-monitoring {
  --_c8y-dark: url("#{$icon-dir}/c8y-dark/e2e-monitoring.svg");
  &::before {
    mask-image: var(--_c8y-dark);
    -webkit-mask-image: var(--_c8y-dark);
  }
}
.c8y-icon-oee {
  --_c8y-dark: url("#{$icon-dir}/c8y-dark/oee.svg");
  --_c8y-light: url("#{$icon-dir}/c8y-light/oee.svg");
  &::before {
    mask-image: var(--_c8y-dark);
    -webkit-mask-image: var(--_c8y-dark);
  }
  &::after {
    --_c8y-after-bg: currentColor;
    mask-image: var(--_c8y-light);
    -webkit-mask-image: var(--_c8y-light);
  }
}
.c8y-icon-streaming-analytics {
  --_c8y-dark: url("#{$icon-dir}/c8y-dark/streaming-analytics.svg");
  --_c8y-light: url("#{$icon-dir}/c8y-light/streaming-analytics.svg");
  &::before {
    mask-image: var(--_c8y-dark);
    -webkit-mask-image: var(--_c8y-dark);
  }
  &::after {
    --_c8y-after-bg: currentColor;
    mask-image: var(--_c8y-light);
    -webkit-mask-image: var(--_c8y-light);
  }
}
.c8y-icon-apama-epl {
  --_c8y-dark: url("#{$icon-dir}/c8y-dark/apama-epl.svg");
  --_c8y-light: url("#{$icon-dir}/c8y-light/apama-epl.svg");
  &::before {
    mask-image: var(--_c8y-dark);
    -webkit-mask-image: var(--_c8y-dark);
  }
  &::after {
    --_c8y-after-bg: currentColor;
    mask-image: var(--_c8y-light);
    -webkit-mask-image: var(--_c8y-light);
  }
}
.c8y-icon-apama-machine-learning {
  --_c8y-dark: url("#{$icon-dir}/c8y-dark/apama-machine-learning.svg");
  --_c8y-light: url("#{$icon-dir}/c8y-light/apama-machine-learning.svg");
  &::before {
    mask-image: var(--_c8y-dark);
    -webkit-mask-image: var(--_c8y-dark);
  }
  &::after {
    --_c8y-after-bg: currentColor;
    mask-image: var(--_c8y-light);
    -webkit-mask-image: var(--_c8y-light);
  }
}
.c8y-icon-apama-machine-learning-workbench {
  --_c8y-dark: url("#{$icon-dir}/c8y-dark/apama-machine-learning-workbench.svg");
  --_c8y-light: url("#{$icon-dir}/c8y-light/apama-machine-learning-workbench.svg");
  &::before {
    mask-image: var(--_c8y-dark);
    -webkit-mask-image: var(--_c8y-dark);
  }
  &::after {
    --_c8y-after-bg: currentColor;
    mask-image: var(--_c8y-light);
    -webkit-mask-image: var(--_c8y-light);
  }
}
.c8y-icon-onnx {
  --_c8y-dark: url("#{$icon-dir}/c8y-dark/onnx.svg");
  &::before {
    mask-image: var(--_c8y-dark);
    -webkit-mask-image: var(--_c8y-dark);
  }
}
.c8y-icon-metering {
  --_c8y-dark: url("#{$icon-dir}/c8y-dark/metering.svg");
  --_c8y-light: url("#{$icon-dir}/c8y-light/metering.svg");
  &::before {
    mask-image: var(--_c8y-dark);
    -webkit-mask-image: var(--_c8y-dark);
  }
  &::after {
    --_c8y-after-bg: currentColor;
    mask-image: var(--_c8y-light);
    -webkit-mask-image: var(--_c8y-light);
  }
}
.c8y-icon-device {
  --_c8y-dark: url("#{$icon-dir}/c8y-dark/device.svg");
  --_c8y-light: url("#{$icon-dir}/c8y-light/device.svg");
  &::before {
    mask-image: var(--_c8y-dark);
    -webkit-mask-image: var(--_c8y-dark);
  }
  &::after {
    --_c8y-after-bg: currentColor;
    mask-image: var(--_c8y-light);
    -webkit-mask-image: var(--_c8y-light);
  }
}
.c8y-icon-device-management {
  --_c8y-dark: url("#{$icon-dir}/c8y-dark/device-management.svg");
  --_c8y-light: url("#{$icon-dir}/c8y-light/device-management.svg");
  &::before {
    mask-image: var(--_c8y-dark);
    -webkit-mask-image: var(--_c8y-dark);
  }
  &::after {
    --_c8y-after-bg: currentColor;
    mask-image: var(--_c8y-light);
    -webkit-mask-image: var(--_c8y-light);
  }
}
.c8y-icon-device-connect {
  --_c8y-dark: url("#{$icon-dir}/c8y-dark/device-connect.svg");
  --_c8y-light: url("#{$icon-dir}/c8y-light/device-connect.svg");
  &::before {
    mask-image: var(--_c8y-dark);
    -webkit-mask-image: var(--_c8y-dark);
  }
  &::after {
    --_c8y-after-bg: currentColor;
    mask-image: var(--_c8y-light);
    -webkit-mask-image: var(--_c8y-light);
  }
}
.c8y-icon-device-control {
  --_c8y-dark: url("#{$icon-dir}/c8y-dark/device-control.svg");
  --_c8y-light: url("#{$icon-dir}/c8y-light/device-control.svg");
  &::before {
    mask-image: var(--_c8y-dark);
    -webkit-mask-image: var(--_c8y-dark);
  }
  &::after {
    --_c8y-after-bg: currentColor;
    mask-image: var(--_c8y-light);
    -webkit-mask-image: var(--_c8y-light);
  }
}
.c8y-icon-device-profile {
  --_c8y-dark: url("#{$icon-dir}/c8y-dark/device-profile.svg");
  --_c8y-light: url("#{$icon-dir}/c8y-light/device-profile.svg");
  &::before {
    mask-image: var(--_c8y-dark);
    -webkit-mask-image: var(--_c8y-dark);
  }
  &::after {
    --_c8y-after-bg: currentColor;
    mask-image: var(--_c8y-light);
    -webkit-mask-image: var(--_c8y-light);
  }
}
.c8y-icon-device-protocols {
  --_c8y-dark: url("#{$icon-dir}/c8y-dark/device-protocols.svg");
  --_c8y-light: url("#{$icon-dir}/c8y-light/device-protocols.svg");
  &::before {
    mask-image: var(--_c8y-dark);
    -webkit-mask-image: var(--_c8y-dark);
  }
  &::after {
    --_c8y-after-bg: currentColor;
    mask-image: var(--_c8y-light);
    -webkit-mask-image: var(--_c8y-light);
  }
}
.c8y-icon-fieldbus {
  --_c8y-dark: url("#{$icon-dir}/c8y-dark/fieldbus.svg");
  --_c8y-light: url("#{$icon-dir}/c8y-light/fieldbus.svg");
  &::before {
    mask-image: var(--_c8y-dark);
    -webkit-mask-image: var(--_c8y-dark);
  }
  &::after {
    --_c8y-after-bg: currentColor;
    mask-image: var(--_c8y-light);
    -webkit-mask-image: var(--_c8y-light);
  }
}
.c8y-icon-firmware {
  --_c8y-dark: url("#{$icon-dir}/c8y-dark/firmware.svg");
  --_c8y-light: url("#{$icon-dir}/c8y-light/firmware.svg");
  &::before {
    mask-image: var(--_c8y-dark);
    -webkit-mask-image: var(--_c8y-dark);
  }
  &::after {
    --_c8y-after-bg: currentColor;
    mask-image: var(--_c8y-light);
    -webkit-mask-image: var(--_c8y-light);
  }
}
.c8y-icon-mobile-add {
  --_c8y-dark: url("#{$icon-dir}/c8y-dark/mobile-add.svg");
  --_c8y-light: url("#{$icon-dir}/c8y-light/mobile-add.svg");
  &::before {
    mask-image: var(--_c8y-dark);
    -webkit-mask-image: var(--_c8y-dark);
  }
  &::after {
    --_c8y-after-bg: currentColor;
    mask-image: var(--_c8y-light);
    -webkit-mask-image: var(--_c8y-light);
  }
}
.c8y-icon-mobile-config {
  --_c8y-dark: url("#{$icon-dir}/c8y-dark/mobile-config.svg");
  --_c8y-light: url("#{$icon-dir}/c8y-light/mobile-config.svg");
  &::before {
    mask-image: var(--_c8y-dark);
    -webkit-mask-image: var(--_c8y-dark);
  }
  &::after {
    --_c8y-after-bg: currentColor;
    mask-image: var(--_c8y-light);
    -webkit-mask-image: var(--_c8y-light);
  }
}
.c8y-icon-simulator {
  --_c8y-dark: url("#{$icon-dir}/c8y-dark/simulator.svg");
  --_c8y-light: url("#{$icon-dir}/c8y-light/simulator.svg");
  &::before {
    mask-image: var(--_c8y-dark);
    -webkit-mask-image: var(--_c8y-dark);
  }
  &::after {
    --_c8y-after-bg: currentColor;
    mask-image: var(--_c8y-light);
    -webkit-mask-image: var(--_c8y-light);
  }
}
.c8y-icon-smart-rest {
  --_c8y-dark: url("#{$icon-dir}/c8y-dark/smart-rest.svg");
  --_c8y-light: url("#{$icon-dir}/c8y-light/smart-rest.svg");
  &::before {
    mask-image: var(--_c8y-dark);
    -webkit-mask-image: var(--_c8y-dark);
  }
  &::after {
    --_c8y-after-bg: currentColor;
    mask-image: var(--_c8y-light);
    -webkit-mask-image: var(--_c8y-light);
  }
}
.c8y-icon-tracking {
  --_c8y-dark: url("#{$icon-dir}/c8y-dark/tracking.svg");
  --_c8y-light: url("#{$icon-dir}/c8y-light/tracking.svg");
  &::before {
    mask-image: var(--_c8y-dark);
    -webkit-mask-image: var(--_c8y-dark);
  }
  &::after {
    --_c8y-after-bg: currentColor;
    mask-image: var(--_c8y-light);
    -webkit-mask-image: var(--_c8y-light);
  }
}
.c8y-icon-mft {
  --_c8y-dark: url("#{$icon-dir}/c8y-dark/mft.svg");
  &::before {
    mask-image: var(--_c8y-dark);
    -webkit-mask-image: var(--_c8y-dark);
  }
}
.c8y-icon-dynamic-mapper {
  --_c8y-dark: url("#{$icon-dir}/c8y-dark/dynamic-mapper.svg");
  --_c8y-light: url("#{$icon-dir}/c8y-light/dynamic-mapper.svg");
  &::before {
    mask-image: var(--_c8y-dark);
    -webkit-mask-image: var(--_c8y-dark);
  }
  &::after {
    --_c8y-after-bg: currentColor;
    mask-image: var(--_c8y-light);
    -webkit-mask-image: var(--_c8y-light);
  }
}
.c8y-icon-connector-in {
  --_c8y-dark: url("#{$icon-dir}/c8y-dark/connector-in.svg");
  --_c8y-light: url("#{$icon-dir}/c8y-light/connector-in.svg");
  &::before {
    mask-image: var(--_c8y-dark);
    -webkit-mask-image: var(--_c8y-dark);
  }
  &::after {
    --_c8y-after-bg: currentColor;
    mask-image: var(--_c8y-light);
    -webkit-mask-image: var(--_c8y-light);
  }
}
.c8y-icon-connector-out {
  --_c8y-dark: url("#{$icon-dir}/c8y-dark/connector-out.svg");
  --_c8y-light: url("#{$icon-dir}/c8y-light/connector-out.svg");
  &::before {
    mask-image: var(--_c8y-dark);
    -webkit-mask-image: var(--_c8y-dark);
  }
  &::after {
    --_c8y-after-bg: currentColor;
    mask-image: var(--_c8y-light);
    -webkit-mask-image: var(--_c8y-light);
  }
}
.c8y-icon-find-map {
  --_c8y-dark: url("#{$icon-dir}/c8y-dark/find-map.svg");
  --_c8y-light: url("#{$icon-dir}/c8y-light/find-map.svg");
  &::before {
    mask-image: var(--_c8y-dark);
    -webkit-mask-image: var(--_c8y-dark);
  }
  &::after {
    --_c8y-after-bg: currentColor;
    mask-image: var(--_c8y-light);
    -webkit-mask-image: var(--_c8y-light);
  }
}
.c8y-icon-location {
  --_c8y-dark: url("#{$icon-dir}/c8y-dark/location.svg");
  --_c8y-light: url("#{$icon-dir}/c8y-light/location.svg");
  &::before {
    mask-image: var(--_c8y-dark);
    -webkit-mask-image: var(--_c8y-dark);
  }
  &::after {
    --_c8y-after-bg: currentColor;
    mask-image: var(--_c8y-light);
    -webkit-mask-image: var(--_c8y-light);
  }
}
.c8y-icon-parking {
  --_c8y-dark: url("#{$icon-dir}/c8y-dark/parking.svg");
  --_c8y-light: url("#{$icon-dir}/c8y-light/parking.svg");
  &::before {
    mask-image: var(--_c8y-dark);
    -webkit-mask-image: var(--_c8y-dark);
  }
  &::after {
    --_c8y-after-bg: currentColor;
    mask-image: var(--_c8y-light);
    -webkit-mask-image: var(--_c8y-light);
  }
}
.c8y-icon-alarm {
  --_c8y-dark: url("#{$icon-dir}/c8y-dark/alarm.svg");
  --_c8y-light: url("#{$icon-dir}/c8y-light/alarm.svg");
  &::before {
    mask-image: var(--_c8y-dark);
    -webkit-mask-image: var(--_c8y-dark);
  }
  &::after {
    --_c8y-after-bg: currentColor;
    mask-image: var(--_c8y-light);
    -webkit-mask-image: var(--_c8y-light);
  }
}
.c8y-icon-alert-idle {
  --_c8y-dark: url("#{$icon-dir}/c8y-dark/alert-idle.svg");
  --_c8y-light: url("#{$icon-dir}/c8y-light/alert-idle.svg");
  &::before {
    mask-image: var(--_c8y-dark);
    -webkit-mask-image: var(--_c8y-dark);
  }
  &::after {
    --_c8y-after-bg: currentColor;
    mask-image: var(--_c8y-light);
    -webkit-mask-image: var(--_c8y-light);
  }
}
.c8y-icon-events {
  --_c8y-dark: url("#{$icon-dir}/c8y-dark/events.svg");
  --_c8y-light: url("#{$icon-dir}/c8y-light/events.svg");
  &::before {
    mask-image: var(--_c8y-dark);
    -webkit-mask-image: var(--_c8y-dark);
  }
  &::after {
    --_c8y-after-bg: currentColor;
    mask-image: var(--_c8y-light);
    -webkit-mask-image: var(--_c8y-light);
  }
}
.c8y-icon-event-processing {
  --_c8y-dark: url("#{$icon-dir}/c8y-dark/event-processing.svg");
  --_c8y-light: url("#{$icon-dir}/c8y-light/event-processing.svg");
  &::before {
    mask-image: var(--_c8y-dark);
    -webkit-mask-image: var(--_c8y-dark);
  }
  &::after {
    --_c8y-after-bg: currentColor;
    mask-image: var(--_c8y-light);
    -webkit-mask-image: var(--_c8y-light);
  }
}
.c8y-icon-smart-rules {
  --_c8y-dark: url("#{$icon-dir}/c8y-dark/smart-rules.svg");
  --_c8y-light: url("#{$icon-dir}/c8y-light/smart-rules.svg");
  &::before {
    mask-image: var(--_c8y-dark);
    -webkit-mask-image: var(--_c8y-dark);
  }
  &::after {
    --_c8y-after-bg: currentColor;
    mask-image: var(--_c8y-light);
    -webkit-mask-image: var(--_c8y-light);
  }
}
.c8y-icon-analytics-smart-rules {
  --_c8y-dark: url("#{$icon-dir}/c8y-dark/analytics-smart-rules.svg");
  --_c8y-light: url("#{$icon-dir}/c8y-light/analytics-smart-rules.svg");
  &::before {
    mask-image: var(--_c8y-dark);
    -webkit-mask-image: var(--_c8y-dark);
  }
  &::after {
    --_c8y-after-bg: currentColor;
    mask-image: var(--_c8y-light);
    -webkit-mask-image: var(--_c8y-light);
  }
}
.c8y-icon-business-rules {
  --_c8y-dark: url("#{$icon-dir}/c8y-dark/business-rules.svg");
  --_c8y-light: url("#{$icon-dir}/c8y-light/business-rules.svg");
  &::before {
    mask-image: var(--_c8y-dark);
    -webkit-mask-image: var(--_c8y-dark);
  }
  &::after {
    --_c8y-after-bg: currentColor;
    mask-image: var(--_c8y-light);
    -webkit-mask-image: var(--_c8y-light);
  }
}
.c8y-icon-notification {
  --_c8y-dark: url("#{$icon-dir}/c8y-dark/notification.svg");
  --_c8y-light: url("#{$icon-dir}/c8y-light/notification.svg");
  &::before {
    mask-image: var(--_c8y-dark);
    -webkit-mask-image: var(--_c8y-dark);
  }
  &::after {
    --_c8y-after-bg: currentColor;
    mask-image: var(--_c8y-light);
    -webkit-mask-image: var(--_c8y-light);
  }
}
.c8y-icon-user {
  --_c8y-dark: url("#{$icon-dir}/c8y-dark/user.svg");
  --_c8y-light: url("#{$icon-dir}/c8y-light/user.svg");
  &::before {
    mask-image: var(--_c8y-dark);
    -webkit-mask-image: var(--_c8y-dark);
  }
  &::after {
    --_c8y-after-bg: currentColor;
    mask-image: var(--_c8y-light);
    -webkit-mask-image: var(--_c8y-light);
  }
}
.c8y-icon-users {
  --_c8y-dark: url("#{$icon-dir}/c8y-dark/users.svg");
  --_c8y-light: url("#{$icon-dir}/c8y-light/users.svg");
  &::before {
    mask-image: var(--_c8y-dark);
    -webkit-mask-image: var(--_c8y-dark);
  }
  &::after {
    --_c8y-after-bg: currentColor;
    mask-image: var(--_c8y-light);
    -webkit-mask-image: var(--_c8y-light);
  }
}
.c8y-icon-add-user {
  --_c8y-dark: url("#{$icon-dir}/c8y-dark/add-user.svg");
  --_c8y-light: url("#{$icon-dir}/c8y-light/add-user.svg");
  &::before {
    mask-image: var(--_c8y-dark);
    -webkit-mask-image: var(--_c8y-dark);
  }
  &::after {
    --_c8y-after-bg: currentColor;
    mask-image: var(--_c8y-light);
    -webkit-mask-image: var(--_c8y-light);
  }
}
.c8y-icon-accounts {
  --_c8y-dark: url("#{$icon-dir}/c8y-dark/accounts.svg");
  --_c8y-light: url("#{$icon-dir}/c8y-light/accounts.svg");
  &::before {
    mask-image: var(--_c8y-dark);
    -webkit-mask-image: var(--_c8y-dark);
  }
  &::after {
    --_c8y-after-bg: currentColor;
    mask-image: var(--_c8y-light);
    -webkit-mask-image: var(--_c8y-light);
  }
}
.c8y-icon-group {
  --_c8y-dark: url("#{$icon-dir}/c8y-dark/group.svg");
  &::before {
    mask-image: var(--_c8y-dark);
    -webkit-mask-image: var(--_c8y-dark);
  }
}
.c8y-icon-group-add {
  --_c8y-dark: url("#{$icon-dir}/c8y-dark/group-add.svg");
  --_c8y-light: url("#{$icon-dir}/c8y-light/group-add.svg");
  &::before {
    mask-image: var(--_c8y-dark);
    -webkit-mask-image: var(--_c8y-dark);
  }
  &::after {
    --_c8y-after-bg: currentColor;
    mask-image: var(--_c8y-light);
    -webkit-mask-image: var(--_c8y-light);
  }
}
.c8y-icon-group-open {
  --_c8y-dark: url("#{$icon-dir}/c8y-dark/group-open.svg");
  --_c8y-light: url("#{$icon-dir}/c8y-light/group-open.svg");
  &::before {
    mask-image: var(--_c8y-dark);
    -webkit-mask-image: var(--_c8y-dark);
  }
  &::after {
    --_c8y-after-bg: currentColor;
    mask-image: var(--_c8y-light);
    -webkit-mask-image: var(--_c8y-light);
  }
}
.c8y-icon-group-remote {
  --_c8y-dark: url("#{$icon-dir}/c8y-dark/group-remote.svg");
  --_c8y-light: url("#{$icon-dir}/c8y-light/group-remote.svg");
  &::before {
    mask-image: var(--_c8y-dark);
    -webkit-mask-image: var(--_c8y-dark);
  }
  &::after {
    --_c8y-after-bg: currentColor;
    mask-image: var(--_c8y-light);
    -webkit-mask-image: var(--_c8y-light);
  }
}
.c8y-icon-group-remote-inactive {
  --_c8y-dark: url("#{$icon-dir}/c8y-dark/group-remote-inactive.svg");
  --_c8y-light: url("#{$icon-dir}/c8y-light/group-remote-inactive.svg");
  &::before {
    mask-image: var(--_c8y-dark);
    -webkit-mask-image: var(--_c8y-dark);
  }
  &::after {
    --_c8y-after-bg: currentColor;
    mask-image: var(--_c8y-light);
    -webkit-mask-image: var(--_c8y-light);
  }
}
.c8y-icon-group-remote-open {
  --_c8y-dark: url("#{$icon-dir}/c8y-dark/group-remote-open.svg");
  --_c8y-light: url("#{$icon-dir}/c8y-light/group-remote-open.svg");
  &::before {
    mask-image: var(--_c8y-dark);
    -webkit-mask-image: var(--_c8y-dark);
  }
  &::after {
    --_c8y-after-bg: currentColor;
    mask-image: var(--_c8y-light);
    -webkit-mask-image: var(--_c8y-light);
  }
}
.c8y-icon-group-smart {
  --_c8y-dark: url("#{$icon-dir}/c8y-dark/group-smart.svg");
  --_c8y-light: url("#{$icon-dir}/c8y-light/group-smart.svg");
  &::before {
    mask-image: var(--_c8y-dark);
    -webkit-mask-image: var(--_c8y-dark);
  }
  &::after {
    --_c8y-after-bg: currentColor;
    mask-image: var(--_c8y-light);
    -webkit-mask-image: var(--_c8y-light);
  }
}
.c8y-icon-group-smart-open {
  --_c8y-dark: url("#{$icon-dir}/c8y-dark/group-smart-open.svg");
  --_c8y-light: url("#{$icon-dir}/c8y-light/group-smart-open.svg");
  &::before {
    mask-image: var(--_c8y-dark);
    -webkit-mask-image: var(--_c8y-dark);
  }
  &::after {
    --_c8y-after-bg: currentColor;
    mask-image: var(--_c8y-light);
    -webkit-mask-image: var(--_c8y-light);
  }
}
.c8y-icon-sub-tenants {
  --_c8y-dark: url("#{$icon-dir}/c8y-dark/sub-tenants.svg");
  --_c8y-light: url("#{$icon-dir}/c8y-light/sub-tenants.svg");
  &::before {
    mask-image: var(--_c8y-dark);
    -webkit-mask-image: var(--_c8y-dark);
  }
  &::after {
    --_c8y-after-bg: currentColor;
    mask-image: var(--_c8y-light);
    -webkit-mask-image: var(--_c8y-light);
  }
}
.c8y-icon-tenant-policies {
  --_c8y-dark: url("#{$icon-dir}/c8y-dark/tenant-policies.svg");
  --_c8y-light: url("#{$icon-dir}/c8y-light/tenant-policies.svg");
  &::before {
    mask-image: var(--_c8y-dark);
    -webkit-mask-image: var(--_c8y-dark);
  }
  &::after {
    --_c8y-after-bg: currentColor;
    mask-image: var(--_c8y-light);
    -webkit-mask-image: var(--_c8y-light);
  }
}
.c8y-icon-security {
  --_c8y-dark: url("#{$icon-dir}/c8y-dark/security.svg");
  --_c8y-light: url("#{$icon-dir}/c8y-light/security.svg");
  &::before {
    mask-image: var(--_c8y-dark);
    -webkit-mask-image: var(--_c8y-dark);
  }
  &::after {
    --_c8y-after-bg: currentColor;
    mask-image: var(--_c8y-light);
    -webkit-mask-image: var(--_c8y-light);
  }
}
.c8y-icon-shield {
  --_c8y-dark: url("#{$icon-dir}/c8y-dark/shield.svg");
  --_c8y-light: url("#{$icon-dir}/c8y-light/shield.svg");
  &::before {
    mask-image: var(--_c8y-dark);
    -webkit-mask-image: var(--_c8y-dark);
  }
  &::after {
    --_c8y-after-bg: currentColor;
    mask-image: var(--_c8y-light);
    -webkit-mask-image: var(--_c8y-light);
  }
}
.c8y-icon-machine-portal {
  --_c8y-dark: url("#{$icon-dir}/c8y-dark/machine-portal.svg");
  --_c8y-light: url("#{$icon-dir}/c8y-light/machine-portal.svg");
  &::before {
    mask-image: var(--_c8y-dark);
    -webkit-mask-image: var(--_c8y-dark);
  }
  &::after {
    --_c8y-after-bg: currentColor;
    mask-image: var(--_c8y-light);
    -webkit-mask-image: var(--_c8y-light);
  }
}
.c8y-icon-atom {
  --_c8y-dark: url("#{$icon-dir}/c8y-dark/atom.svg");
  --_c8y-light: url("#{$icon-dir}/c8y-light/atom.svg");
  &::before {
    mask-image: var(--_c8y-dark);
    -webkit-mask-image: var(--_c8y-dark);
  }
  &::after {
    --_c8y-after-bg: currentColor;
    mask-image: var(--_c8y-light);
    -webkit-mask-image: var(--_c8y-light);
  }
}
.c8y-icon-book {
  --_c8y-dark: url("#{$icon-dir}/c8y-dark/book.svg");
  &::before {
    mask-image: var(--_c8y-dark);
    -webkit-mask-image: var(--_c8y-dark);
  }
}
.c8y-icon-bookmark {
  --_c8y-dark: url("#{$icon-dir}/c8y-dark/bookmark.svg");
  &::before {
    mask-image: var(--_c8y-dark);
    -webkit-mask-image: var(--_c8y-dark);
  }
}
.c8y-icon-bulb {
  --_c8y-dark: url("#{$icon-dir}/c8y-dark/bulb.svg");
  --_c8y-light: url("#{$icon-dir}/c8y-light/bulb.svg");
  &::before {
    mask-image: var(--_c8y-dark);
    -webkit-mask-image: var(--_c8y-dark);
  }
  &::after {
    --_c8y-after-bg: currentColor;
    mask-image: var(--_c8y-light);
    -webkit-mask-image: var(--_c8y-light);
  }
}
.c8y-icon-calendar {
  --_c8y-dark: url("#{$icon-dir}/c8y-dark/calendar.svg");
  --_c8y-light: url("#{$icon-dir}/c8y-light/calendar.svg");
  &::before {
    mask-image: var(--_c8y-dark);
    -webkit-mask-image: var(--_c8y-dark);
  }
  &::after {
    --_c8y-after-bg: currentColor;
    mask-image: var(--_c8y-light);
    -webkit-mask-image: var(--_c8y-light);
  }
}
.c8y-icon-component {
  --_c8y-dark: url("#{$icon-dir}/c8y-dark/component.svg");
  --_c8y-light: url("#{$icon-dir}/c8y-light/component.svg");
  &::before {
    mask-image: var(--_c8y-dark);
    -webkit-mask-image: var(--_c8y-dark);
  }
  &::after {
    --_c8y-after-bg: currentColor;
    mask-image: var(--_c8y-light);
    -webkit-mask-image: var(--_c8y-light);
  }
}
.c8y-icon-css {
  --_c8y-dark: url("#{$icon-dir}/c8y-dark/css.svg");
  &::before {
    mask-image: var(--_c8y-dark);
    -webkit-mask-image: var(--_c8y-dark);
  }
}
.c8y-icon-design {
  --_c8y-dark: url("#{$icon-dir}/c8y-dark/design.svg");
  --_c8y-light: url("#{$icon-dir}/c8y-light/design.svg");
  &::before {
    mask-image: var(--_c8y-dark);
    -webkit-mask-image: var(--_c8y-dark);
  }
  &::after {
    --_c8y-after-bg: currentColor;
    mask-image: var(--_c8y-light);
    -webkit-mask-image: var(--_c8y-light);
  }
}
.c8y-icon-energy {
  --_c8y-dark: url("#{$icon-dir}/c8y-dark/energy.svg");
  --_c8y-light: url("#{$icon-dir}/c8y-light/energy.svg");
  &::before {
    mask-image: var(--_c8y-dark);
    -webkit-mask-image: var(--_c8y-dark);
  }
  &::after {
    --_c8y-after-bg: currentColor;
    mask-image: var(--_c8y-light);
    -webkit-mask-image: var(--_c8y-light);
  }
}
.c8y-icon-grid-off {
  --_c8y-dark: url("#{$icon-dir}/c8y-dark/grid-off.svg");
  --_c8y-light: url("#{$icon-dir}/c8y-light/grid-off.svg");
  &::before {
    mask-image: var(--_c8y-dark);
    -webkit-mask-image: var(--_c8y-dark);
  }
  &::after {
    --_c8y-after-bg: currentColor;
    mask-image: var(--_c8y-light);
    -webkit-mask-image: var(--_c8y-light);
  }
}
.c8y-icon-grid-on {
  --_c8y-dark: url("#{$icon-dir}/c8y-dark/grid-on.svg");
  &::before {
    mask-image: var(--_c8y-dark);
    -webkit-mask-image: var(--_c8y-dark);
  }
}
.c8y-icon-java {
  --_c8y-dark: url("#{$icon-dir}/c8y-dark/java.svg");
  --_c8y-light: url("#{$icon-dir}/c8y-light/java.svg");
  &::before {
    mask-image: var(--_c8y-dark);
    -webkit-mask-image: var(--_c8y-dark);
  }
  &::after {
    --_c8y-after-bg: currentColor;
    mask-image: var(--_c8y-light);
    -webkit-mask-image: var(--_c8y-light);
  }
}
.c8y-icon-layers {
  --_c8y-dark: url("#{$icon-dir}/c8y-dark/layers.svg");
  --_c8y-light: url("#{$icon-dir}/c8y-light/layers.svg");
  &::before {
    mask-image: var(--_c8y-dark);
    -webkit-mask-image: var(--_c8y-dark);
  }
  &::after {
    --_c8y-after-bg: currentColor;
    mask-image: var(--_c8y-light);
    -webkit-mask-image: var(--_c8y-light);
  }
}
.c8y-icon-layout {
  --_c8y-dark: url("#{$icon-dir}/c8y-dark/layout.svg");
  &::before {
    mask-image: var(--_c8y-dark);
    -webkit-mask-image: var(--_c8y-dark);
  }
}
.c8y-icon-management {
  --_c8y-dark: url("#{$icon-dir}/c8y-dark/management.svg");
  --_c8y-light: url("#{$icon-dir}/c8y-light/management.svg");
  &::before {
    mask-image: var(--_c8y-dark);
    -webkit-mask-image: var(--_c8y-dark);
  }
  &::after {
    --_c8y-after-bg: currentColor;
    mask-image: var(--_c8y-light);
    -webkit-mask-image: var(--_c8y-light);
  }
}
.c8y-icon-modules {
  --_c8y-dark: url("#{$icon-dir}/c8y-dark/modules.svg");
  --_c8y-light: url("#{$icon-dir}/c8y-light/modules.svg");
  &::before {
    mask-image: var(--_c8y-dark);
    -webkit-mask-image: var(--_c8y-dark);
  }
  &::after {
    --_c8y-after-bg: currentColor;
    mask-image: var(--_c8y-light);
    -webkit-mask-image: var(--_c8y-light);
  }
}
.c8y-icon-parameters {
  --_c8y-dark: url("#{$icon-dir}/c8y-dark/parameters.svg");
  &::before {
    mask-image: var(--_c8y-dark);
    -webkit-mask-image: var(--_c8y-dark);
  }
}
.c8y-icon-parameters-on {
  --_c8y-dark: url("#{$icon-dir}/c8y-dark/parameters-on.svg");
  --_c8y-light: url("#{$icon-dir}/c8y-light/parameters-on.svg");
  &::before {
    mask-image: var(--_c8y-dark);
    -webkit-mask-image: var(--_c8y-dark);
  }
  &::after {
    --_c8y-after-bg: currentColor;
    mask-image: var(--_c8y-light);
    -webkit-mask-image: var(--_c8y-light);
  }
}
.c8y-icon-waste-bin {
  --_c8y-dark: url("#{$icon-dir}/c8y-dark/waste-bin.svg");
  --_c8y-light: url("#{$icon-dir}/c8y-light/waste-bin.svg");
  &::before {
    mask-image: var(--_c8y-dark);
    -webkit-mask-image: var(--_c8y-dark);
  }
  &::after {
    --_c8y-after-bg: currentColor;
    mask-image: var(--_c8y-light);
    -webkit-mask-image: var(--_c8y-light);
  }
}
.c8y-icon-archive {
  --_c8y-dark: url("#{$icon-dir}/c8y-dark/archive.svg");
  --_c8y-light: url("#{$icon-dir}/c8y-light/archive.svg");
  &::before {
    mask-image: var(--_c8y-dark);
    -webkit-mask-image: var(--_c8y-dark);
  }
  &::after {
    --_c8y-after-bg: currentColor;
    mask-image: var(--_c8y-light);
    -webkit-mask-image: var(--_c8y-light);
  }
}
.c8y-icon-tools {
  --_c8y-dark: url("#{$icon-dir}/c8y-dark/tools.svg");
  --_c8y-light: url("#{$icon-dir}/c8y-light/tools.svg");
  &::before {
    mask-image: var(--_c8y-dark);
    -webkit-mask-image: var(--_c8y-dark);
  }
  &::after {
    --_c8y-after-bg: currentColor;
    mask-image: var(--_c8y-light);
    -webkit-mask-image: var(--_c8y-light);
  }
}
.c8y-icon-thin-edge {
  --_c8y-dark: url("#{$icon-dir}/c8y-dark/thin-edge.svg");
  --_c8y-light: url("#{$icon-dir}/c8y-light/thin-edge.svg");
  &::before {
    mask-image: var(--_c8y-dark);
    -webkit-mask-image: var(--_c8y-dark);
  }
  &::after {
    --_c8y-after-bg: currentColor;
    mask-image: var(--_c8y-light);
    -webkit-mask-image: var(--_c8y-light);
  }
}
} // @if $use-svg-icons