@c8y/style 1023.17.20 → 1023.22.2

package/styles/icons/_c8y-icons.scss

@@ -0,0 +1,1209 @@
+@use "../../variables/index" as *;
+
+@use "../../variables/dlt-c8y-icons-vars";
+@use "../mixins/icon-base";
+
+/**
+ * C8Y Icons - Dual-tone icon font system with light and dark variants
+ *
+ * Note: Contains @font-face definitions for c8yicon-dark and c8yicon-light fonts.
+ * Uses $size-4 for border-radius.
+ *
+ * Intentionally hardcoded values:
+ * - Icon sizes (14px, 16px, 20px, 21px, 22px, 24px, 30px, 32px, 35px, 36px, 50px, 64px): Component-specific icon dimensions
+ * - Line-heights matching icon sizes: Proper icon alignment
+ * - Small spacing (1px margin, 2px padding): Fine-tuning adjustments
+ * - Border width (1px): Standard border
+ */
+
+/* Icon Font: c8yicon */
+$asset-directory: if($use-relative-paths, '../../assets', 'assets');
+
+@font-face {
+  font-family: "c8yicon-dark";
+  src: url("#{$asset-directory}/c8y-icon-dark.eot");
+  src: url("#{$asset-directory}/c8y-icon-dark.eot?#iefix") format("embedded-opentype"),
+       url("#{$asset-directory}/c8y-icon-dark.woff") format("woff"),
+       url("#{$asset-directory}/c8y-icon-dark.ttf") format("truetype"),
+       url("#{$asset-directory}/c8y-icon-dark.svg#c8yicon-dark") format("svg");
+  font-weight: normal;
+  font-style: normal;
+}
+
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+  @font-face {
+    font-family: "c8yicon-dark";
+    src: url("#{$asset-directory}/c8y-icon-dark.svg#c8yicon-dark") format("svg");
+  }
+}
+
+@font-face {
+  font-family: "c8yicon-light";
+  src: url("#{$asset-directory}/c8y-icon-light.eot");
+  src: url("#{$asset-directory}/c8y-icon-light.eot?#iefix") format("embedded-opentype"),
+       url("#{$asset-directory}/c8y-icon-light.woff") format("woff"),
+       url("#{$asset-directory}/c8y-icon-light.ttf") format("truetype"),
+       url("#{$asset-directory}/c8y-icon-light.svg#c8yicon-light") format("svg");
+  font-weight: normal;
+  font-style: normal;
+}
+
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+  @font-face {
+    font-family: "c8yicon-light";
+    src: url("#{$asset-directory}/c8y-icon-light.svg#c8yicon-light") format("svg");
+  }
+}
+
+.c8y-icon {
+  position: relative;
+  display: inline-block;
+  line-height: 1;
+  padding: 0;
+  min-width: 1em;
+  &:not([class^="fa-"]):not([class*=" fa-"]):not([class^="dlt-c8y-icon-"]):not([class*=" dlt-c8y-icon-"])::before{
+    display: inline-block;
+    font-family: "c8yicon-dark";
+    font-style: normal;
+    font-weight: normal;
+    font-variant: normal;
+    line-height: 1;
+    width: 1.1em;
+    text-decoration: inherit;
+    text-rendering: optimizeLegibility;
+    text-transform: none;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+    font-smoothing: antialiased;
+    .c8y-app-icon &{
+      width: auto;
+    }
+  }
+  &:not([class^="fa-"]):not([class*=" fa-"]):not([class^="dlt-c8y-icon-"]):not([class*=" dlt-c8y-icon-"])::after{
+    display: inline-block;
+    font-family: "c8yicon-light";
+    font-style: normal;
+    font-weight: normal;
+    font-variant: normal;
+    line-height: 1;
+    text-decoration: inherit;
+    text-rendering: optimizeLegibility;
+    text-transform: none;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+    font-smoothing: antialiased;
+    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-aab-icon-model {
+  &:before {
+    content: $c8y-icon-dark-aab-icon-model,
+  }
+  &:after {
+    content: $c8y-icon-light-aab-icon-model,
+  }
+}
+.c8y-icon-aab-icon-template-model {
+  &:before {
+    content: $c8y-icon-dark-aab-icon-template-model,
+  }
+  &:after {
+    content: $c8y-icon-light-aab-icon-template-model,
+  }
+}
+.c8y-icon-accounts {
+  &:before {
+    content: $c8y-icon-dark-accounts,
+  }
+  &:after {
+    content: $c8y-icon-light-accounts,
+  }
+}
+.c8y-icon-add-user {
+  &:before {
+    content: $c8y-icon-dark-add-user,
+  }
+  &:after {
+    content: $c8y-icon-light-add-user,
+  }
+}
+.c8y-icon-administration {
+  &:before {
+    content: $c8y-icon-dark-administration,
+  }
+  &:after {
+    content: $c8y-icon-light-administration,
+  }
+}
+.c8y-icon-alarm {
+  &:before {
+    content: $c8y-icon-dark-alarm,
+  }
+  &:after {
+    content: $c8y-icon-light-alarm,
+  }
+}
+.c8y-icon-alert-idle {
+  &:before {
+    content: $c8y-icon-dark-alert-idle,
+  }
+  &:after {
+    content: $c8y-icon-light-alert-idle,
+  }
+}
+.c8y-icon-alfabet {
+  &:before {
+    content: $c8y-icon-dark-alfabet,
+  }
+}
+.c8y-icon-analytic-model {
+  &:before {
+    content: $c8y-icon-dark-analytic-model,
+  }
+  &:after {
+    content: $c8y-icon-light-analytic-model,
+  }
+}
+.c8y-icon-analytics-builder {
+  &:before {
+    content: $c8y-icon-dark-analytics-builder,
+  }
+  &:after {
+    content: $c8y-icon-light-analytics-builder,
+  }
+}
+.c8y-icon-apama-epl {
+  &:before {
+    content: $c8y-icon-dark-apama-epl,
+  }
+  &:after {
+    content: $c8y-icon-light-apama-epl,
+  }
+}
+.c8y-icon-apama-machine-learning-workbench {
+  &:before {
+    content: $c8y-icon-dark-apama-machine-learning-workbench,
+  }
+  &:after {
+    content: $c8y-icon-light-apama-machine-learning-workbench,
+  }
+}
+.c8y-icon-apama-machine-learning {
+  &:before {
+    content: $c8y-icon-dark-apama-machine-learning,
+  }
+  &:after {
+    content: $c8y-icon-light-apama-machine-learning,
+  }
+}
+.c8y-icon-archive {
+  &:before {
+    content: $c8y-icon-dark-archive,
+  }
+  &:after {
+    content: $c8y-icon-light-archive,
+  }
+}
+.c8y-icon-aris {
+  &:before {
+    content: $c8y-icon-dark-aris,
+  }
+}
+.c8y-icon-atom {
+  &:before {
+    content: $c8y-icon-dark-atom,
+  }
+  &:after {
+    content: $c8y-icon-light-atom,
+  }
+}
+.c8y-icon-book {
+  &:before {
+    content: $c8y-icon-dark-book;
+  }
+}
+.c8y-icon-bookmark {
+  &:before {
+    content: $c8y-icon-dark-bookmark,
+  }
+}
+.c8y-icon-bulb {
+  &:before {
+    content: $c8y-icon-dark-bulb,
+  }
+  &:after {
+    content: $c8y-icon-light-bulb,
+  }
+}
+.c8y-icon-business-rules {
+  &:before {
+    content: $c8y-icon-dark-business-rules,
+  }
+  &:after {
+    content: $c8y-icon-light-business-rules,
+  }
+}
+.c8y-icon-c8y-c {
+  &:before {
+    content: $c8y-icon-dark-c8y-c,
+  }
+}
+.c8y-icon-c8y-data {
+  &:before {
+    content: $c8y-icon-dark-c8y-data,
+  }
+  &:after {
+    content: $c8y-icon-light-c8y-data,
+  }
+}
+.c8y-icon-c8y-support {
+  &:before {
+    content: $c8y-icon-dark-c8y-support,
+  }
+  &:after {
+    content: $c8y-icon-light-c8y-support,
+  }
+}
+.c8y-icon-c8y {
+  &:before {
+    content: $c8y-icon-dark-c8y,
+  }
+}
+.c8y-icon-calendar {
+  &:before {
+    content: $c8y-icon-dark-calendar,
+  }
+  &:after {
+    content: $c8y-icon-light-calendar,
+  }
+}
+.c8y-icon-chart {
+  &:before {
+    content: $c8y-icon-dark-chart,
+  }
+  &:after {
+    content: $c8y-icon-light-chart,
+  }
+}
+.c8y-icon-circle-star {
+  &:before {
+    content: $c8y-icon-dark-circle-star,
+  }
+  &:after {
+    content: $c8y-icon-light-circle-star,
+  }
+}
+.c8y-icon-cloud-container {
+  &:before {
+    content: $c8y-icon-dark-cloud-container,
+  }
+  &:after {
+    content: $c8y-icon-light-cloud-container,
+  }
+}
+.c8y-icon-cockpit {
+  &:before {
+    content: $c8y-icon-dark-cockpit,
+  }
+  &:after {
+    content: $c8y-icon-light-cockpit,
+  }
+}
+.c8y-icon-component {
+  &:before {
+    content: $c8y-icon-dark-component,
+  }
+  &:after {
+    content: $c8y-icon-light-component,
+  }
+}
+.c8y-icon-connector-in {
+  &:before {
+    content: $c8y-icon-dark-connector-in,
+  }
+  &:after {
+    content: $c8y-icon-light-connector-in,
+  }
+}
+.c8y-icon-connector-out {
+  &:before {
+    content: $c8y-icon-dark-connector-out,
+  }
+  &:after {
+    content: $c8y-icon-light-connector-out,
+  }
+}
+.c8y-icon-css {
+  &:before {
+    content: $c8y-icon-dark-css,
+  }
+}
+.c8y-icon-cumulocity-iot {
+  &:before {
+    content: $c8y-icon-dark-cumulocity-iot,
+  }
+}
+.c8y-icon-data-broker {
+  &:before {
+    content: $c8y-icon-dark-data-broker,
+  }
+  &:after {
+    content: $c8y-icon-light-data-broker,
+  }
+}
+.c8y-icon-data-explorer {
+  &:before {
+    content: $c8y-icon-dark-data-explorer,
+  }
+  &:after {
+    content: $c8y-icon-light-data-explorer,
+  }
+}
+.c8y-icon-data-hub {
+  &:before {
+    content: $c8y-icon-dark-data-hub,
+  }
+  &:after {
+    content: $c8y-icon-light-data-hub,
+  }
+}
+.c8y-icon-data-points {
+  &:before {
+    content: $c8y-icon-dark-data-points,
+  }
+  &:after {
+    content: $c8y-icon-light-data-points,
+  }
+}
+.c8y-icon-design {
+  &:before {
+    content: $c8y-icon-dark-design,
+  }
+  &:after {
+    content: $c8y-icon-light-design,
+  }
+}
+.c8y-icon-device-connect {
+  &:before {
+    content: $c8y-icon-dark-device-connect,
+  }
+  &:after {
+    content: $c8y-icon-light-device-connect,
+  }
+}
+.c8y-icon-device-control {
+  &:before {
+    content: $c8y-icon-dark-device-control,
+  }
+  &:after {
+    content: $c8y-icon-light-device-control,
+  }
+}
+.c8y-icon-device-management {
+  &:before {
+    content: $c8y-icon-dark-device-management,
+  }
+  &:after {
+    content: $c8y-icon-light-device-management,
+  }
+}
+.c8y-icon-device-profile {
+  &:before {
+    content: $c8y-icon-dark-device-profile,
+  }
+  &:after {
+    content: $c8y-icon-light-device-profile,
+  }
+}
+.c8y-icon-device-protocols {
+  &:before {
+    content: $c8y-icon-dark-device-protocols,
+  }
+  &:after {
+    content: $c8y-icon-light-device-protocols,
+  }
+}
+.c8y-icon-device {
+  &:before {
+    content: $c8y-icon-dark-device,
+  }
+  &:after {
+    content: $c8y-icon-light-device,
+  }
+}
+.c8y-icon-dynamic-mapper {
+  &:before {
+    content: $c8y-icon-dark-dynamic-mapper,
+  }
+  &:after {
+    content: $c8y-icon-light-dynamic-mapper,
+  }
+}
+.c8y-icon-e2e-monitoring {
+  &:before {
+    content: $c8y-icon-dark-e2e-monitoring,
+  }
+}
+.c8y-icon-energy {
+  &:before {
+    content: $c8y-icon-dark-energy,
+  }
+  &:after {
+    content: $c8y-icon-light-energy,
+  }
+}
+.c8y-icon-enterprise {
+  &:before {
+    content: $c8y-icon-dark-enterprise,
+  }
+  &:after {
+    content: $c8y-icon-light-enterprise,
+  }
+}
+.c8y-icon-event-processing {
+  &:before {
+    content: $c8y-icon-dark-event-processing,
+  }
+  &:after {
+    content: $c8y-icon-light-event-processing,
+  }
+}
+.c8y-icon-events {
+  &:before {
+    content: $c8y-icon-dark-events,
+  }
+  &:after {
+    content: $c8y-icon-light-events,
+  }
+}
+.c8y-icon-fieldbus {
+  &:before {
+    content: $c8y-icon-dark-fieldbus,
+  }
+  &:after {
+    content: $c8y-icon-light-fieldbus,
+  }
+}
+.c8y-icon-find-map {
+  &:before {
+    content: $c8y-icon-dark-find-map,
+  }
+  &:after {
+    content: $c8y-icon-light-find-map,
+  }
+}
+.c8y-icon-firmware {
+  &:before {
+    content: $c8y-icon-dark-firmware,
+  }
+  &:after {
+    content: $c8y-icon-light-firmware,
+  }
+}
+.c8y-icon-grid-off {
+  &:before {
+    content: $c8y-icon-dark-grid-off,
+  }
+  &:after {
+    content: $c8y-icon-light-grid-off,
+  }
+}
+.c8y-icon-grid-on {
+  &:before {
+    content: $c8y-icon-dark-grid-on,
+  }
+}
+.c8y-icon-group-add {
+  &:before {
+    content: $c8y-icon-dark-group-add,
+  }
+  &:after {
+    content: $c8y-icon-light-group-add,
+  }
+}
+.c8y-icon-group-open {
+  &:before {
+    content: $c8y-icon-dark-group-open,
+  }
+  &:after {
+    content: $c8y-icon-light-group-open,
+  }
+}
+.c8y-icon-group-remote-inactive {
+  &:before {
+    content: $c8y-icon-dark-group-remote-inactive,
+  }
+  &:after {
+    content: $c8y-icon-light-group-remote-inactive,
+  }
+}
+.c8y-icon-group-remote-open {
+  &:before {
+    content: $c8y-icon-dark-group-remote-open,
+  }
+  &:after {
+    content: $c8y-icon-light-group-remote-open,
+  }
+}
+.c8y-icon-group-remote {
+  &:before {
+    content: $c8y-icon-dark-group-remote,
+  }
+  &:after {
+    content: $c8y-icon-light-group-remote,
+  }
+}
+.c8y-icon-group-smart-open {
+  &:before {
+    content: $c8y-icon-dark-group-smart-open,
+  }
+  &:after {
+    content: $c8y-icon-light-group-smart-open,
+  }
+}
+.c8y-icon-group-smart {
+  &:before {
+    content: $c8y-icon-dark-group-smart,
+  }
+  &:after {
+    content: $c8y-icon-light-group-smart,
+  }
+}
+.c8y-icon-group {
+  &:before {
+    content: $c8y-icon-dark-group,
+  }
+}
+.c8y-icon-java {
+  &:before {
+    content: $c8y-icon-dark-java,
+  }
+  &:after {
+    content: $c8y-icon-light-java,
+  }
+}
+.c8y-icon-layers {
+  &:before {
+    content: $c8y-icon-dark-layers,
+  }
+  &:after {
+    content: $c8y-icon-light-layers,
+  }
+}
+.c8y-icon-layout {
+  &:before {
+    content: $c8y-icon-dark-layout,
+  }
+}
+.c8y-icon-location {
+  &:before {
+    content: $c8y-icon-dark-location,
+  }
+  &:after {
+    content: $c8y-icon-light-location,
+  }
+}
+.c8y-icon-machine-portal {
+  &:before {
+    content: $c8y-icon-dark-machine-portal,
+  }
+  &:after {
+    content: $c8y-icon-light-machine-portal,
+  }
+}
+.c8y-icon-management {
+  &:before {
+    content: $c8y-icon-dark-management,
+  }
+  &:after {
+    content: $c8y-icon-light-management,
+  }
+}
+.c8y-icon-metering {
+  &:before {
+    content: $c8y-icon-dark-metering,
+  }
+  &:after {
+    content: $c8y-icon-light-metering,
+  }
+}
+.c8y-icon-mft {
+  &:before {
+    content: $c8y-icon-dark-mft,
+  }
+
+}
+.c8y-icon-mobile-add {
+  &:before {
+    content: $c8y-icon-dark-mobile-add,
+  }
+  &:after {
+    content: $c8y-icon-light-mobile-add,
+  }
+}
+.c8y-icon-mobile-config {
+  &:before {
+    content: $c8y-icon-dark-mobile-config,
+  }
+  &:after {
+    content: $c8y-icon-light-mobile-config,
+  }
+}
+.c8y-icon-modules {
+  &:before {
+    content: $c8y-icon-dark-modules,
+  }
+  &:after {
+    content: $c8y-icon-light-modules,
+  }
+}
+.c8y-icon-mycloud {
+  &:before {
+    content: $c8y-icon-dark-mycloud,
+  }
+}
+.c8y-icon-notification {
+  &:before {
+    content: $c8y-icon-dark-notification,
+  }
+  &:after {
+    content: $c8y-icon-light-notification,
+  }
+}
+.c8y-icon-oee {
+  &:before {
+    content: $c8y-icon-dark-oee,
+  }
+  &:after {
+    content: $c8y-icon-light-oee,
+  }
+}
+.c8y-icon-onnx {
+  &:before {
+    content: $c8y-icon-dark-onnx,
+  }
+}
+.c8y-icon-overviews {
+  &:before {
+    content: $c8y-icon-dark-overviews,
+  }
+  &:after {
+    content: $c8y-icon-light-overviews,
+  }
+}
+.c8y-icon-parameters-on {
+  &:before {
+    content: $c8y-icon-dark-parameters-on,
+  }
+  &:after {
+    content: $c8y-icon-light-parameters-on,
+  }
+}
+.c8y-icon-parameters {
+  &:before {
+    content: $c8y-icon-dark-parameters,
+  }
+}
+.c8y-icon-parking {
+  &:before {
+    content: $c8y-icon-dark-parking,
+  }
+  &:after {
+    content: $c8y-icon-light-parking,
+  }
+}
+.c8y-icon-report {
+  &:before {
+    content: $c8y-icon-dark-report,
+  }
+  &:after {
+    content: $c8y-icon-light-report,
+  }
+}
+.c8y-icon-reports {
+  &:before {
+    content: $c8y-icon-dark-reports,
+  }
+  &:after {
+    content: $c8y-icon-light-reports,
+  }
+}
+.c8y-icon-rocket {
+  &:before {
+    content: $c8y-icon-dark-rocket,
+  }
+  &:after {
+    content: $c8y-icon-light-rocket,
+  }
+}
+.c8y-icon-saas {
+  &:before {
+    content: $c8y-icon-dark-saas,
+  }
+  &:after {
+    content: $c8y-icon-light-saas,
+  }
+}
+.c8y-icon-security {
+  &:before {
+    content: $c8y-icon-dark-security,
+  }
+  &:after {
+    content: $c8y-icon-light-security,
+  }
+}
+.c8y-icon-shield {
+  &:before {
+    content: $c8y-icon-dark-shield,
+  }
+  &:after {
+    content: $c8y-icon-light-shield,
+  }
+}
+.c8y-icon-simulator {
+  &:before {
+    content: $c8y-icon-dark-simulator,
+  }
+  &:after {
+    content: $c8y-icon-light-simulator,
+  }
+}
+.c8y-icon-smart-rest {
+  &:before {
+    content: $c8y-icon-dark-smart-rest,
+  }
+  &:after {
+    content: $c8y-icon-light-smart-rest,
+  }
+}
+.c8y-icon-smart-rules {
+  &:before {
+    content: $c8y-icon-dark-smart-rules,
+  }
+  &:after {
+    content: $c8y-icon-light-smart-rules,
+  }
+}
+.c8y-icon-solution-accelerator {
+  &:before {
+    content: $c8y-icon-dark-solution-accelerator,
+  }
+  &:after {
+    content: $c8y-icon-light-solution-accelerator,
+  }
+}
+.c8y-icon-streaming-analytics {
+  &:before {
+    content: $c8y-icon-dark-streaming-analytics,
+  }
+  &:after {
+    content: $c8y-icon-light-streaming-analytics,
+  }
+}
+.c8y-icon-sub-tenants {
+  &:before {
+    content: $c8y-icon-dark-sub-tenants,
+  }
+  &:after {
+    content: $c8y-icon-light-sub-tenants,
+  }
+}
+.c8y-icon-tenant-policies {
+  &:before {
+    content: $c8y-icon-dark-tenant-policies,
+  }
+  &:after {
+    content: $c8y-icon-light-tenant-policies,
+  }
+}
+.c8y-icon-tools {
+  &:before {
+    content: $c8y-icon-dark-tools,
+  }
+  &:after {
+    content: $c8y-icon-light-tools,
+  }
+}
+.c8y-icon-tracking {
+  &:before {
+    content: $c8y-icon-dark-tracking,
+  }
+  &:after {
+    content: $c8y-icon-light-tracking,
+  }
+}
+.c8y-icon-usage-statistics {
+  &:before {
+    content: $c8y-icon-dark-usage-statistics,
+  }
+  &:after {
+    content: $c8y-icon-light-usage-statistics,
+  }
+}
+.c8y-icon-user {
+  &:before {
+    content: $c8y-icon-dark-user,
+  }
+  &:after {
+    content: $c8y-icon-light-user,
+  }
+}
+.c8y-icon-users {
+  &:before {
+    content: $c8y-icon-dark-users,
+  }
+  &:after {
+    content: $c8y-icon-light-users,
+  }
+}
+.c8y-icon-waste-bin {
+  &:before {
+    content: $c8y-icon-dark-waste-bin,
+  }
+  &:after {
+    content: $c8y-icon-light-waste-bin,
+  }
+}
+.c8y-icon-wm-api {
+  &:before {
+    content: $c8y-icon-dark-wm-api,
+  }
+
+}
+.c8y-icon-wm-b2b {
+  &:before {
+    content: $c8y-icon-dark-wm-b2b,
+  }
+
+}
+.c8y-icon-wm-dynamicapps {
+  &:before {
+    content: $c8y-icon-dark-wm-dynamicapps,
+  }
+}
+.c8y-icon-wm-integration {
+  &:before {
+    content: $c8y-icon-dark-wm-integration,
+  }
+  &:after {
+    content: $c8y-icon-light-wm-integration,
+  }
+}
+
+.c8y-icon-analytics-smart-rules {
+  &:before {
+    content: $c8y-icon-dark-analytics-smart-rules,
+  }
+  &:after {
+    content: $c8y-icon-light-analytics-smart-rules,
+  }
+}
+
+
+
+
+.libraries-icon {
+  position: relative;
+  display: inline-block;
+  font-family: "c8yicon-dark";
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  line-height: 1;
+  width: 1.1em;
+  text-decoration: inherit;
+  text-rendering: optimizeLegibility;
+  text-transform: none;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  font-smoothing: antialiased;
+
+  &:after {
+    content: $c8y-icon-dark-book;
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: 4;
+    font-size: .5em;
+    background-color: $component-background-default;
+    border-bottom-left-radius: .2em;
+    border-bottom: 0.2em solid $component-background-default;
+    border-left: 0.1em solid $component-background-default;
+  }
+  [class^='dlt-c8y-icon-'],
+  [class*=' dlt-c8y-icon-'],
+  .dlt-c8y-icon, .c8y-icon{
+      position: relative;
+      z-index: 2;
+  }
+}
+
+
+.app-noicon {
+  display: inline-block;
+  width: 36px;
+  height: 36px;
+  border-radius: $size-4;
+  background-color: var(--brand-dark, var(--c8y-brand-dark));
+  color: var(--brand-light, var(--c8y-brand-light));
+  overflow: hidden;
+  margin-top: 0;
+  font-size: 21px;
+  line-height: 36px;
+  text-transform: capitalize;
+  text-align: center;
+  >span {
+    display: inline-block;
+    overflow: hidden;
+  }
+  .interact-list &{
+    width: 22px;
+    height: 22px;
+    font-size: 14px;
+    line-height: 22px;
+  }
+}
+
+// plugins icon to use in the ecosystem
+.c8y-plugin-icon{
+  position: relative;
+  font-style: normal;
+  span{
+    width: 100%;
+    font-size: 14px;
+    line-height: 35px;
+    color: $component-background-default;
+    position: absolute;
+    top: 0;
+    display: block;
+    text-align: center;
+    z-index: 3;
+  }
+
+  &::before{
+    @include icon-base.dlt-c8y-icon;
+    content: dlt-c8y-icons-vars.$dlt-c8y-icon-plugin;
+    position: relative;
+    color: $text-color;
+    z-index: 1;
+    font-size: 1.4em;
+  }
+}
+
+.app-title {
+  margin: 0;
+  .c8y-icon {
+    font-size: 150%;
+    width: 1.5em;
+  }
+}
+
+
+.circle-icon-wrapper{
+  --c8y-icon-stroke-color: #{$text-color};
+  border-radius: 50%;
+  color: white;
+  width: 24px;
+  aspect-ratio: 1/1;
+  text-align: center;
+  padding-bottom: 2px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  > i{
+    font-size: 16px;
+    color: $component-background-default;
+  }
+  &--medium{
+    width: 20px;
+    height: 20px;
+    > i{
+      font-size: 12px;
+    }
+  }
+  &--small{
+    width: 16px;
+    height: 16px;
+    > i{
+      font-size: 10px;
+    }
+  }
+}
+
+
+
+
+.dot {
+  width: 50px;
+  height: 50px;
+  display: inline-flex;
+  border-radius: 50%;
+  background-color: var(--brand-primary, var(--c8y-brand-primary));
+  color: $gray-100;
+  font-size: 24px;
+  align-items: center;
+  justify-content: center;
+  margin: 1px 0;
+  &.dot-danger {
+    background-color: var(--palette-status-danger, var(--c8y-palette-status-danger));
+  }
+  &.dot-warning {
+    background-color: var(--palette-status-warning, var(--c8y-palette-status-warning));
+  }
+  &.dot-success {
+    background-color: var(--palette-status-success, var(--c8y-palette-status-success));
+  }
+  &.dot-default{
+    background-color: $gray-80;
+  }
+  &.dot-info{
+    background-color: var(--palette-status-info, var(--c8y-palette-status-info));
+  }
+
+  &.bg-primary-light{
+    color: var(--c8y-palette-low);
+  }
+  &.small {
+    font-size: 14px;
+    width: 20px;
+    height: 20px;
+    line-height: inherit;
+    .c8y-icon,
+    .fa{
+      line-height: 20px;
+      font-size: 12px;
+    }
+  }
+  &.dot-30{
+    font-size: 14px;
+    width: 30px;
+    height: 30px;
+    line-height: 32px;
+  }
+  &.dot-64{
+    width: 64px;
+    height: 64px;
+  }
+}
+
+// fix notch
+.dlt-c8y-icon-circle-o-notch{
+  &.icon-spin {
+    animation: icon-spin 1s infinite linear;
+  }
+}
+
+// glyphicon - used in datepicker
+.glyphicon {
+  display: inline-block;
+  font: normal normal normal 14px/1 '#{dlt-c8y-icons-vars.$icon-font-family}';
+  font-size: inherit;
+  text-rendering: auto;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  transform: translate(0, 0);
+  width: 1.25em;
+  text-align: center;
+}
+
+.glyphicon-chevron-left {
+  &:before {
+    content: dlt-c8y-icons-vars.$dlt-c8y-icon-chevron-left;
+  }
+}
+
+.glyphicon-chevron-right {
+  &:before {
+    content: dlt-c8y-icons-vars.$dlt-c8y-icon-chevron-right;
+  }
+}
+
+.glyphicon-chevron-up {
+  &:before {
+    content: dlt-c8y-icons-vars.$dlt-c8y-icon-chevron-up;
+  }
+}
+
+.glyphicon-chevron-down {
+  &:before {
+    content: dlt-c8y-icons-vars.$dlt-c8y-icon-chevron-down;
+  }
+}
+
+.glyphicon-ok {
+  &:before {
+    content: dlt-c8y-icons-vars.$dlt-c8y-icon-check;
+  }
+}
+
+.glyphicon-remove {
+  &:before {
+    content: dlt-c8y-icons-vars.$dlt-c8y-icon-times;
+  }
+}
+
+
+c8y-icon-selector-wrapper{
+  > div{
+    min-width: 64px;
+    min-height: $form-control-height-base;
+    position: relative;
+    border: 1px solid $component-border-color;
+  }
+
+  .showOnHover{
+    background-color: $component-background-default;
+    opacity:0;
+  }
+  &:hover .showOnHover{
+    opacity: 1;
+  }
+}