@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;
  }
}