@c8y/style 1023.30.0 → 1023.42.1

package/styles/core/buttons/_buttons.less

@@ -1,31 +1,72 @@
+@import "../../mixins/_buttons.less";
+@import "../../mixins/_gradients.less";
+@import "../../mixins/_opacity.less";
+@import "../../mixins/_tab-focus.less";
+
+/**
+ * Buttons - Button component styles with multiple variants
+ *
+ * Note: Uses @btn-* variables for sizing, @size-* for spacing. Uses CSS custom properties for colors.
+ *
+ * Intentionally hardcoded values:
+ * - Border/outline widths (1px, 2px): Standard borders and focus indicators
+ * - Outline-offsets (-2px): Focus indicator positioning
+ * - Small positioning offsets (2px, 3px, 6px, -6px): Fine-tuning for icons and pseudo-elements
+ * - Component-specific heights and font-sizes (16px, 20px, 24px, 50px): Button variants
+ * - Padding 7px (off-grid): Small button specific
+ * - Calc expressions with px: Dynamic sizing calculations
+ * - Background patterns and masks: Visual effects
+ */
+
+// Shared button mixins
+.btn-focus-outline() {
+  outline: 2px solid @component-brand-primary !important;
+  outline-offset: -2px;
+}
+
+.btn-appearance-reset() {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+
+.btn-base-reset() {
+  margin-bottom: 0;
+  padding: 0;
+  border: 0;
+  background-color: transparent;
+  background-image: none;
+  cursor: pointer;
+  touch-action: manipulation;
+}
+
 .btn {
   display: inline-block;
   margin-bottom: 0; // For input.btn
   border: 1px solid transparent;
   background-color: transparent;
-  background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
+  background-image: none; // Reset unusual Firefox-on-Android default style,see https://github.com/necolas/normalize.css/issues/214
   vertical-align: middle;
   text-align: center;
   white-space: nowrap;
   font-weight: @btn-font-weight;
+  font-family: @btn-font-family;
   cursor: pointer;
   touch-action: manipulation;
   transition: @btn-transition;
   text-decoration: none;
 
-  .button-size(@btn-padding-vertical; calc(@btn-padding-horizontal * 2); @btn-font-size-base; @btn-line-height-base;
-    @btn-border-radius-base; @form-control-height-base );
-  .user-select(none);
+  .button-size(@btn-padding-vertical; calc(@btn-padding-horizontal * 2); @btn-font-size-base; @btn-line-height-base; @btn-border-radius-base; @form-control-height-base);
+  user-select: none;
 
   // btns containing just an icon
-  >i {
+  > i {
     vertical-align: text-top;
   }
 
   &,
   &:active,
   &.active {
-
     &:focus,
     &.focus {
       outline: none;
@@ -45,18 +86,16 @@
   &.disabled,
   &[disabled],
   fieldset[disabled] & {
-
     &,
     &:hover,
     &:focus {
-      cursor: @cursor-disabled  !important;
+      cursor: @cursor-disabled !important;
       opacity: var(--c8y-root-component-opacity-disabled);
-      .box-shadow(none);
+      box-shadow: none;
     }
   }
 
   a & {
-
     &.disabled,
     fieldset[disabled] & {
       pointer-events: none; // Future-proof disabling of clicks on `<a>` elements
@@ -65,42 +104,34 @@
 
   &:has(.badge) {
     display: inline-flex;
-    gap: 4px;
+    gap: @size-4;
     align-items: center;
   }
 }
 
 .btn-icon {
-  padding-left: @btn-padding-icon-horizontal  !important;
-  padding-right: @btn-padding-icon-horizontal  !important;
+  padding-left: @btn-padding-icon-horizontal !important;
+  padding-right: @btn-padding-icon-horizontal !important;
   height: @form-control-height-base;
+  align-items: center;
 
   &:hover,
   &:focus,
   &:active {
-    outline: 2px solid @component-brand-primary  !important;
-    outline-offset: -2px;
+    .btn-focus-outline();
   }
 
   &:focus {
-    border-radius: @component-border-radius-focus  !important;
+    border-radius: @component-border-radius-focus !important;
     opacity: 1 !important;
   }
 }
 
 .btn-dot {
-  margin-bottom: 0;
-  padding: 0;
-  border: 0;
-  background-color: transparent;
-  background-image: none;
+  .btn-base-reset();
+  .btn-appearance-reset();
   white-space: nowrap;
-  cursor: pointer;
-  touch-action: manipulation;
   max-width: 100%;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
   text-align: center;
   font-size: 16px;
   line-height: 1;
@@ -110,34 +141,30 @@
   justify-content: center;
   min-width: @form-control-height-base;
   color: var(--brand-primary, var(--c8y-brand-primary));
-
+  border-radius: @btn-border-radius-base;
   &.btn {
     height: @form-control-height-base;
     transition: none;
-
     .c8y-list__item &,
     .cdk-cell & {
-      &:not(.c8y-list__item__body * *) {
-        height: calc(@margin-base * 5);
-        margin-top: -10px;
-        margin-bottom: -10px;
-        display: flex;
-      }
+      height: calc(@size-base * 5);
+      margin-top: calc(-1 * @size-10);
+      margin-bottom: calc(-1 * @size-10);
+      display: flex;
     }
   }
 
   &:hover,
   &:focus,
   &:active {
-    outline: 2px solid @component-brand-primary  !important;
-    outline-offset: -2px;
+    .btn-focus-outline();
   }
 
   &:focus {
-    border-radius: @component-border-radius-focus  !important;
+    border-radius: @component-border-radius-focus !important;
     opacity: 1 !important;
 
-    >* {
+    > * {
       outline: 0 !important;
     }
   }
@@ -150,17 +177,8 @@
     color: var(--palette-status-danger, var(--c8y-palette-status-danger));
   }
 
-  &.btn-dot--warning {
-    color: var(--palette-status-warning, var(--c8y-palette-status-warning));
-  }
-
-  &.btn-dot--info {
-    color: var(--palette-status-info, var(--c8y-palette-status-info));
-  }
-
-  &.btn-dot--success {
-    color: var(--palette-status-success, var(--c8y-palette-status-success));
-  }
+  // Removed unused btn-dot color variants - verified 0 usages:
+  // .btn-dot--warning, .btn-dot--info, .btn-dot--success
 
   &.small {
     font-size: @font-size-small;
@@ -172,45 +190,88 @@
   }
 }
 
-.btn-icon-dot__item{
-  display: flex; 
+.btn-icon-dot {
+  display: flex;
+  background: @component-background-default;
+  color: @text-color;
+  justify-content: center;
+  align-items: center;
+  aspect-ratio: 1;
+  height: 100%;
+  border-radius: 50%;
+  border: 0;
+  padding: 0;
+  &:not(.active) {
+    background: var(--c8y-level-4);
+    color: @text-muted;
+  }
+  &:hover,
+  &:focus,
+  &:active {
+    .btn-focus-outline();
+  }
+  &:not(button) {
+    height: 20px;
+  }
+  &.active, &:not(button) {
+    &.default {
+      background: @component-background-default;
+      color: @component-color-default;
+    }
+    &.auto-refresh {
+      background: var(--c8y-brand-primary);
+      color: var(--c8y-palette-high);
+    }
+    &.time-context {
+      background: var(--palette-status-info, var(--c8y-palette-status-info));
+      color: var(--c8y-palette-high);
+    }
+    &.aggregation {
+      background: var(--c8y-palette-status-warning-light);
+      color: var(--c8y-palette-gray-10);
+    }
+  }
+}
+
+.btn-icon-dot__item {
+  display: flex;
   justify-content: center;
   align-items: center;
   aspect-ratio: 1;
   height: 100%;
-  border-radius: @margin-16!important;
+  border-radius: @size-16 !important;
   border: 0;
   padding: 0;
   font-size: @font-size-small;
   background: var(--c8y-level-4);
   color: @text-muted;
- 
-  &:not(button){
+
+  &:not(button) {
     height: 20px;
   }
-  &.standalone{
-     &.default{
+  &.standalone {
+    &.default {
       background: @component-background-default;
       color: @component-color-default;
     }
-    &.auto-refresh{
+    &.auto-refresh {
       background: @component-pulse-color;
       color: var(--c8y-palette-high);
     }
-    &.time-context{
+    &.time-context {
       background: var(--palette-status-info, var(--c8y-palette-status-info));
       color: var(--c8y-palette-high);
     }
-    &.aggregation{
+    &.aggregation {
       background: var(--c8y-palette-status-warning-high);
       color: var(--c8y-palette-gray-10);
     }
   }
 }
 
-.btn-icon-dot-set{
+.btn-icon-dot-set {
   display: flex;
-  gap: 8px;
+  gap: @size-8;
   background-color: transparent;
   background-image: none;
   box-shadow: none;
@@ -224,30 +285,30 @@
   -webkit-user-select: none;
   user-select: none;
   border: 1px solid @form-control-border-color-default;
-  border-radius: @margin-16!important;
+  border-radius: @size-16 !important;
   font-size: @font-size-small;
-  padding: 5px @margin-8;
+  padding: @size-5 @size-8;
   transition: all 0.25s ease;
   &:hover,
   &:focus,
   &:active {
     outline-offset: -2px;
-    outline: 2px solid @form-control-border-color-focus!important;
+    outline: 2px solid @form-control-border-color-focus !important;
   }
-  &.active{
-    .default{
+  &.active {
+    .default {
       background: @component-background-default;
       color: @component-color-default;
     }
-    .auto-refresh{
+    .auto-refresh {
       background: @component-pulse-color;
       color: var(--c8y-palette-high);
     }
-    .time-context{
+    .time-context {
       background: @status-info;
       color: var(--c8y-palette-high);
     }
-    .aggregation{
+    .aggregation {
       background: var(--c8y-palette-status-warning-high);
       color: var(--c8y-palette-gray-10);
     }
@@ -255,13 +316,12 @@
 }
 
 // spacing buttons outside btn-group
-.btn+.btn:not(.btn-block) {
-  margin-left: @margin-base;
+.btn + .btn:not(.btn-block) {
+  margin-left: @size-base;
 }
 
-.d-flex,
-.d-col {
-  >.btn+.btn:not(.btn-block) {
+.d-flex, .d-col {
+  > .btn + .btn:not(.btn-block) {
     margin: 0;
   }
 }
@@ -269,7 +329,6 @@
 // Alternate buttons
 .btn-default {
   .button-variant(c8y-btn-default);
-
   .datetime-picker & {
     --c8y-btn-default-background-default: var(--c8y-form-control-background-default);
   }
@@ -281,7 +340,7 @@
 
 .btn-accent {
   .button-variant(c8y-btn-accent);
-  border-radius: @btn-border-radius-pill  !important;
+  border-radius: @btn-border-radius-pill !important;
 }
 
 .btn-danger {
@@ -319,7 +378,7 @@
     background-repeat: no-repeat;
     background-size: 100% 100%, 50%50%;
     background-position: 0 0, 100% 0, 100% 100%, 0 100%;
-    background-image: conic-gradient(@brand-primary, @status-danger, @status-warning, @status-info, @brand-primary);
+    background-image: conic-gradient(@brand-primary; @status-danger, @status-warning; @status-info, @brand-primary);
     transform: translate(-50%, -50%);
     opacity: .7;
   }
@@ -331,7 +390,7 @@
 
   >span {
     position: relative;
-    padding-left: @margin-16;
+    padding-left: @size-16;
     height: 100%;
     overflow: visible;
     opacity: 1;
@@ -417,7 +476,7 @@
       >span::before {
         mask-size: 2.3ch;
         mask-position: -1px center;
-        background-image: linear-gradient(90deg, @brand-primary, @status-danger, @status-warning, @status-info, @brand-primary);
+        background-image: linear-gradient(90deg, @brand-primary; @status-danger, @status-warning; @status-info, @brand-primary);
         background-size: 50px 50px;
         animation: symbolAnimation 2s linear infinite;
         animation-direction: alternate-reverse;
@@ -438,7 +497,7 @@
 
 .btn-ai-hint, .btn-ai-hint.btn-dot {
   pointer-events: none;
-  border-radius: @margin-16  !important;
+  border-radius: @size-16  !important;
   overflow: hidden;
   color: @text-muted;
   display: inline-flex;
@@ -462,7 +521,7 @@
   }
 
   &::after {
-    border-radius: @margin-16  !important;
+    border-radius: @size-16  !important;
   }
 
   &.btn-lg {
@@ -506,30 +565,20 @@
   }
 }
 
-
-
 // btn without any padding or styling
-.btn-clean {
+.btn-clean() {
+  .btn-base-reset();
+  .btn-appearance-reset();
   display: inline-block;
-  margin-bottom: 0;
-  border: 0;
-  background-color: transparent;
-  background-image: none;
-  box-shadow: none;
   text-align: left;
   white-space: nowrap;
-  cursor: pointer;
-  touch-action: manipulation;
   color: inherit;
   max-width: 100%;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  .user-select(none);
+  user-select: none;
   transition: all 0.25s ease;
-
-  &:not(.btn) {
-    padding: 0;
+  
+  &:not(.form-control){
+    box-shadow: none;
   }
 
   &:hover {
@@ -542,22 +591,29 @@
     .c8y-focus-inset();
   }
 
-  &.text-truncate {
-    max-width: 100%;
-  }
-
   &[disabled] {
-
     &,
     &:hover,
     &:focus {
       cursor: @cursor-disabled;
       .opacity(0.65);
-      .box-shadow(none);
+      box-shadow: none;
     }
   }
 }
 
+.btn-clean {
+  .btn-clean();
+
+  &:not(.btn) {
+    padding: 0;
+  }
+
+  &.text-truncate {
+    max-width: 100%;
+  }
+}
+
 .btn-no-focus {
   &:focus {
     outline: none !important;
@@ -565,7 +621,7 @@
 }
 
 // inside labels (e.g. for help icon)
-label>.btn-clean {
+label > .btn-clean {
   vertical-align: baseline;
 }
 
@@ -579,26 +635,25 @@ label>.btn-clean {
   color: @link-color;
   font-weight: normal;
   height: auto;
-  .box-shadow(none);
+  box-shadow: none;
   transition: @btn-transition;
 
   &.c8y-realtime {
     color: inherit;
   }
-
   &:not(.btn-xs):not(.btn-sm) {
     padding: @btn-padding-vertical @btn-padding-horizontal;
     min-height: @form-control-height-base;
   }
 
-  [class^='dlt-c8y-icon-']~span,
-  [class*=' dlt-c8y-icon-']~span,
-  [class^='dlt-c8y-icon-']~translate,
-  [class*=' dlt-c8y-icon-']~translate {
+  [class^='dlt-c8y-icon-'] ~ span,
+  [class*=' dlt-c8y-icon-'] ~ span,
+  [class^='dlt-c8y-icon-'] ~ translate,
+  [class*=' dlt-c8y-icon-'] ~ translate {
     color: inherit;
   }
 
-  >i {
+  > i {
     vertical-align: text-top;
   }
 
@@ -608,7 +663,7 @@ label>.btn-clean {
   &[disabled],
   fieldset[disabled] & {
     background-color: transparent;
-    .box-shadow(none);
+    box-shadow: none;
   }
 
   &,
@@ -633,7 +688,6 @@ label>.btn-clean {
 
   &[disabled],
   fieldset[disabled] & {
-
     &:hover,
     &:focus {
       color: @btn-link-disabled-color;
@@ -666,8 +720,8 @@ label>.btn-clean {
   --help-info-color: var(--palette-status-info, var(--c8y-palette-status-info));
   color: var(--palette-status-info, var(--c8y-palette-status-info));
 
-  >[class^='dlt-c8y-icon-'],
-  >[class*=' dlt-c8y-icon-'] {
+  > [class^='dlt-c8y-icon-'],
+  > [class*=' dlt-c8y-icon-'] {
     display: none;
   }
 
@@ -684,15 +738,14 @@ label>.btn-clean {
   .c8y-dark-theme & {
     outline: 1px solid var(--palette-status-info, var(--c8y-palette-status-info));
     background-color: var(--palette-status-info, var(--c8y-palette-status-info));
-    --help-info-color: @palette-high;
+    --help-info-color: @{palette-high};
     color: @palette-high;
   }
-
   .c8y-system-theme & {
     @media (prefers-color-scheme: dark) {
-      outline: 1px solid @status-info;
-      background-color: @status-info;
-      --help-info-color: @palette-high;
+      outline: 1px solid var(--palette-status-info, var(--c8y-palette-status-info));
+      background-color: var(--palette-status-info, var(--c8y-palette-status-info));
+      --help-info-color: @{palette-high};
       color: @palette-high;
     }
   }
@@ -702,13 +755,13 @@ label>.btn-clean {
     outline: 1px solid var(--palette-status-info, var(--c8y-palette-status-info));
     outline-offset: 0;
     background-color: var(--palette-status-info, var(--c8y-palette-status-info));
-    --help-info-color: @palette-high;
+    --help-info-color: @{palette-high};
   }
 
   &:focus {
     outline: 1px solid var(--palette-status-info, var(--c8y-palette-status-info));
     background-color: var(--palette-status-info, var(--c8y-palette-status-info));
-    --help-info-color: @palette-high;
+    --help-info-color: @{palette-high};
     color: @palette-high;
   }
 
@@ -719,20 +772,17 @@ label>.btn-clean {
     align-self: center;
     height: 14px;
     width: 14px;
-
     &::before {
       inset: 0;
     }
   }
 }
 
-label+.btn-help,
-label .btn-help {
+label + .btn-help, label .btn-help {
   display: inline;
   align-self: center;
   height: 14px;
   width: 14px;
-
   &::before {
     inset: 0;
   }
@@ -740,29 +790,25 @@ label .btn-help {
 
 // Button Sizes
 .btn-lg {
-  .button-size(@btn-padding-large-vertical; @btn-padding-large-horizontal; @btn-font-size-large; @btn-line-height-large;
-    @btn-border-radius-large; @form-control-height-lg;
-  );
+  .button-size(@btn-padding-large-vertical; @btn-padding-large-horizontal; @btn-font-size-large; @btn-line-height-large; @btn-border-radius-large; @form-control-height-lg);
 }
 
 .btn-sm {
-  .button-size(@btn-padding-small-vertical; @btn-padding-small-horizontal; @btn-font-size-small;
-    @btn-line-height-small; @btn-border-radius-small; @form-control-height-sm );
+  .button-size(@btn-padding-small-vertical; @btn-padding-small-horizontal; @btn-font-size-small; @btn-line-height-small; @btn-border-radius-small; @form-control-height-sm);
 }
 
 .btn-xs {
-  .button-size(@btn-padding-xs-vertical; @btn-padding-xs-horizontal; @btn-font-size-xs;
-    @btn-line-height-xs; @btn-border-radius-xs; @checkbox-size );
+  .button-size(@btn-padding-xs-vertical; @btn-padding-xs-horizontal; @btn-font-size-xs; @btn-line-height-xs; @btn-border-radius-xs; @checkbox-size);
   position: relative;
 
-  >.icon-spin {
+  > .icon-spin {
     line-height: 10px;
   }
 
   .list-group &,
   .c8y-list__item & {
     &:not(:hover) {
-      .btn-default();
+      &:extend(.btn-default);
 
       &.btn-link {
         background-color: transparent;
@@ -777,11 +823,7 @@ label .btn-help {
   }
 }
 
-.btn-40 {
-  .button-size(@btn-padding-vertical; @btn-padding-horizontal; @btn-font-size-base;
-    @btn-line-height-base; 0; @margin-40 );
-  min-width: 40px;
-}
+// Removed unused button sizing variant - verified 0 usages: .btn-40
 
 .btn-block {
   display: block;
@@ -789,8 +831,8 @@ label .btn-help {
 }
 
 // Vertically space out multiple block buttons
-.btn-block+.btn-block {
-  margin: @margin-base 0 0 0;
+.btn-block + .btn-block {
+  margin: @size-base 0 0 0;
 }
 
 // Specificity overrides
@@ -804,32 +846,27 @@ input[type='button'] {
 
 // BUTTON PENDING
 .btn-pending {
-
   &,
   &:hover,
   &:focus {
-    #gradient>.striped();
+    .gradient-striped();
     background-size: 40px 40px;
-    .animation(progress-bar-stripes 0.5s linear infinite);
+    animation: progress-bar-stripes 0.5s linear infinite;
     pointer-events: none !important;
     outline: none !important;
   }
-
   &.btn-default {
-
     &,
     &:hover,
     &:focus {
-      #gradient>.striped(var(--c8y-brand-70));
+      .gradient-striped(var(--c8y-brand-70));
     }
   }
-
   &.btn-danger {
-
     &,
     &:hover,
     &:focus {
-      #gradient>.striped(var(--c8y-palette-status-danger-light));
+      .gradient-striped(var(--c8y-palette-status-danger-light));
     }
   }
 }
@@ -861,8 +898,8 @@ input[type='button'] {
 
 .collapse-btn {
   padding: 0;
-  width: calc(@margin-base * 5);
-  height: calc(@margin-base * 5);
+  width: calc(@size-base * 5);
+  height: calc(@size-base * 5);
   display: inline-flex;
   justify-content: center;
   align-items: center;
@@ -871,16 +908,15 @@ input[type='button'] {
   background-image: none;
   color: @component-color-actions;
   opacity: @component-actions-opacity;
-  .user-select(none);
+  user-select: none;
   touch-action: manipulation;
-  .transition(all 0.25s ease);
-
+  transition: all 0.25s ease;
   &:not(.btn-dot) {
     font-size: 14px;
   }
 
-  >i {
-    .transition(all 0.25s ease);
+  > i {
+    transition: all 0.25s ease;
   }
 
   &:hover,
@@ -901,25 +937,24 @@ input[type='button'] {
     color: @component-brand-primary;
     opacity: 1 !important;
 
-    >i {
-      .rotate(180deg);
-
+    > i {
+      transform: rotate(180deg);
       &.dlt-c8y-icon-chevron-right {
-        .rotate(90deg);
+        transform: rotate(90deg);
       }
     }
   }
 }
 
 .btn-navbar {
-  padding: 3px @margin-base;
+  padding: 3px @size-base;
   color: @action-bar-color-actions;
   opacity: 1;
   background-color: transparent;
 
   @media (max-width: @screen-xs-max) {
     display: block;
-    padding: calc(@margin-base + 2) @margin-16;
+    padding: calc(@size-base + 2) @size-16;
     width: 100%;
     max-width: 100%;
     text-align: left;
@@ -944,7 +979,7 @@ input[type='button'] {
     text-decoration: none;
 
     .c8y-icon,
-    >[class^='dlt-c8y-icon-'],
+    > [class^='dlt-c8y-icon-'],
     [class*=' dlt-c8y-icon-'] {
       color: @action-bar-color-actions-hover;
       opacity: 1;
@@ -956,8 +991,8 @@ input[type='button'] {
 .btn-add-block {
   display: flex;
   align-items: center;
-  margin-bottom: @margin-16;
-  padding: calc(@margin-base + @margin-4) @margin-16;
+  margin-bottom: @size-16;
+  padding: calc(@size-base + @size-4) @size-16;
   width: 100%;
   border: 0;
   background-color: @component-background-default;
@@ -965,7 +1000,7 @@ input[type='button'] {
   color: @component-brand-primary;
   text-decoration: none !important;
   box-shadow: @elevation-sm;
-  .transition(all 0.35s ease);
+  transition: all 0.35s ease;
 
   &[disabled],
   &.disabled {
@@ -978,16 +1013,16 @@ input[type='button'] {
   [class*=' dlt-c8y-icon-'] {
     color: @component-brand-primary;
     font-size: 2em;
-    .transition(transform 0.35s ease);
-    margin-right: @margin-base;
+    transition: transform 0.35s ease;
+    margin-right: @size-base;
   }
 
   &:hover {
     box-shadow: @elevation-hover;
 
-    >[class^='dlt-c8y-icon-'],
+    > [class^='dlt-c8y-icon-'],
     [class*=' dlt-c8y-icon-'] {
-      .scale(1.1);
+      transform: scale(1.1);
     }
   }
 
@@ -1005,7 +1040,7 @@ input[type='button'] {
     margin-top: @component-padding;
     min-height: 56px;
 
-    >[class^='dlt-c8y-icon-'],
+    > [class^='dlt-c8y-icon-'],
     [class*=' dlt-c8y-icon-'] {
       color: inherit;
     }
@@ -1018,7 +1053,6 @@ input[type='button'] {
 
 // btn checkbox
 .btn {
-
   &[btnCheckbox],
   &[uib-btn-checkbox],
   &.c8y-btn-checkbox {
@@ -1032,8 +1066,8 @@ input[type='button'] {
     background-color: transparent;
     line-height: 1;
     color: var(--c8y-switch-handle-color);
-    .box-shadow(none);
-    .transition(all 0.25s ease) !important;
+    box-shadow: none;
+    transition: all 0.25s ease;
 
     * {
       position: relative;
@@ -1065,7 +1099,7 @@ input[type='button'] {
       background-color: @switch-background-default;
       content: '';
 
-      .transition(background 0.25s ease);
+      transition: background 0.25s ease;
     }
 
     &::after {
@@ -1078,32 +1112,32 @@ input[type='button'] {
       z-index: -1;
       border-radius: calc(@switch-height / 2) !important;
       background-color: var(--c8y-switch-handle-background, @form-control-background-default);
-      .box-shadow(0 2px 3px fade(black, 20%));
-      .transition(all 0.25s ease) !important;
+      box-shadow: 0 2px 3px rgba(@black, 0.2);
+      transition: all 0.25s ease;
     }
 
     &.active {
       padding: 0 16px 0 32px;
       border: 0 !important;
       background-color: transparent;
-      .box-shadow(none);
-      .transition(all 0.25s ease);
+      box-shadow: none;
+      transition: all 0.25s ease;
 
       &::before {
         background-color: @switch-background-active;
-        .transition(background 0.25s ease);
+        transition: background 0.25s ease;
       }
 
       &::after {
         right: 2px;
         left: 18px;
-        .transition(all 0.25s ease);
+        transition: all 0.25s ease;
       }
     }
   }
 
   &.c8y-btn-checkbox--inline {
-    margin: -5px 0;
+    margin: calc(-1 * @size-5) 0;
     vertical-align: unset;
   }
 }
@@ -1124,7 +1158,7 @@ input[type='button'] {
   max-width: 100%;
   height: 45px;
 
-  >span,
+  > span,
   c8y-cell-renderer {
     white-space: nowrap;
     overflow: hidden;
@@ -1149,7 +1183,7 @@ input[type='button'] {
   }
 
   .filtered & {
-    color: @brand-primary  !important;
+    color: var(--brand-primary, var(--c8y-brand-primary)) !important;
   }
 
   &.c8y-dropdown {
@@ -1161,7 +1195,7 @@ input[type='button'] {
 
     .dropdown.open & {
       background: white;
-      // .boxShadowHelper(4) !important;
+      .boxShadowHelper(md, right);
     }
   }
 }
@@ -1169,7 +1203,7 @@ input[type='button'] {
 .btn-sort {
   opacity: 0;
 
-  >.dlt-c8y-icon-exchange {
+  > .dlt-c8y-icon-exchange {
     transform: rotate(90deg);
     margin-top: 4px;
   }
@@ -1197,10 +1231,9 @@ input[type='button'] {
 }
 
 .btnbar {
-
   .btnbar-btn,
   .dropdown .c8y-dropdown {
-    padding: calc(@margin-16 - 2px) @margin-base;
+    padding: calc(@size-16 - 2px) @size-base;
     color: @action-bar-color-default;
     opacity: 1;
     background: none;
@@ -1210,7 +1243,7 @@ input[type='button'] {
 
     @media (max-width: @screen-xs-max) {
       display: block;
-      padding: calc(@margin-base + 2px) @margin-16;
+      padding: calc(@size-base + 2px) @size-16;
       max-width: 100%;
       text-align: left;
     }
@@ -1222,7 +1255,7 @@ input[type='button'] {
     }
 
     .c8y-icon,
-    >[class^='dlt-c8y-icon-'],
+    > [class^='dlt-c8y-icon-'],
     [class*=' dlt-c8y-icon-'] {
       opacity: 0.9;
     }
@@ -1233,7 +1266,7 @@ input[type='button'] {
       text-decoration: none;
 
       .c8y-icon,
-      >[class^='dlt-c8y-icon-'],
+      > [class^='dlt-c8y-icon-'],
       [class*=' dlt-c8y-icon-'] {
         opacity: 1;
       }
@@ -1253,9 +1286,8 @@ input[type='button'] {
         color: var(--c8y-brand-7);
         text-decoration: none;
         outline: 1px solid @component-background-active;
-
         .c8y-icon,
-        >[class^='dlt-c8y-icon-'],
+        > [class^='dlt-c8y-icon-'],
         [class*=' dlt-c8y-icon-'] {
           opacity: 1;
         }
@@ -1267,8 +1299,7 @@ input[type='button'] {
 .btn--caret {
   display: flex;
   align-items: center;
-
-  >i {
+  > i {
     transform: translateX(-7px);
   }
 }