@c8y/style 1023.17.19 → 1023.22.2

package/styles/core/buttons/_buttons.scss

@@ -0,0 +1,1318 @@
+@use "sass:math";
+@use "../../../variables/index" as *;
+@use "../../mixins/buttons";
+@use "../../mixins/gradients";
+@use "../../mixins/opacity";
+@use "../../mixins/tab-focus";
+
+/**
+ * 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
+@mixin btn-focus-outline() {
+  outline: 2px solid $component-brand-primary !important;
+  outline-offset: -2px;
+}
+
+@mixin btn-appearance-reset() {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+
+@mixin 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
+  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;
+
+  @include buttons.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 {
+    vertical-align: text-top;
+  }
+
+  &,
+  &:active,
+  &.active {
+    &:focus,
+    &.focus {
+      outline: none;
+
+      &.dropdown-toggle {
+        @include tab-focus.c8y-focus-inset();
+      }
+    }
+  }
+
+  &:hover,
+  &:focus,
+  &.focus {
+    text-decoration: none;
+  }
+
+  &.disabled,
+  &[disabled],
+  fieldset[disabled] & {
+    &,
+    &:hover,
+    &:focus {
+      cursor: $cursor-disabled !important;
+      opacity: var(--c8y-root-component-opacity-disabled);
+      box-shadow: none;
+    }
+  }
+
+  a & {
+    &.disabled,
+    fieldset[disabled] & {
+      pointer-events: none; // Future-proof disabling of clicks on `<a>` elements
+    }
+  }
+
+  &:has(.badge) {
+    display: inline-flex;
+    gap: $size-4;
+    align-items: center;
+  }
+}
+
+.btn-icon {
+  padding-left: $btn-padding-icon-horizontal !important;
+  padding-right: $btn-padding-icon-horizontal !important;
+  height: $form-control-height-base;
+  display: inline-flex;
+  align-items: center;
+
+  &:hover,
+  &:focus,
+  &:active {
+    @include btn-focus-outline();
+  }
+
+  &:focus {
+    border-radius: $component-border-radius-focus !important;
+    opacity: 1 !important;
+  }
+}
+
+.btn-dot {
+  @include btn-base-reset();
+  @include btn-appearance-reset();
+  white-space: nowrap;
+  max-width: 100%;
+  text-align: center;
+  font-size: 16px;
+  line-height: 1;
+  height: 20px;
+  display: inline-flex;
+  align-items: center;
+  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 & {
+      height: calc($size-base * 5);
+      margin-top: calc(-1 * $size-10);
+      margin-bottom: calc(-1 * $size-10);
+      display: flex;
+    }
+  }
+
+  &:hover,
+  &:focus,
+  &:active {
+    @include btn-focus-outline();
+  }
+
+  &:focus {
+    border-radius: $component-border-radius-focus !important;
+    opacity: 1 !important;
+
+    > * {
+      outline: 0 !important;
+    }
+  }
+
+  .input-group-btn & {
+    height: $form-control-height-base;
+  }
+
+  &.btn-dot--danger {
+    color: var(--palette-status-danger, var(--c8y-palette-status-danger));
+  }
+
+  // Removed unused btn-dot color variants - verified 0 usages:
+  // .btn-dot--warning, .btn-dot--info, .btn-dot--success
+
+  &.small {
+    font-size: $font-size-small;
+  }
+
+  small,
+  .small {
+    font-size: $font-size-small;
+  }
+}
+
+.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 {
+    @include 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: $size-16 !important;
+  border: 0;
+  padding: 0;
+  font-size: $font-size-small;
+  background: var(--c8y-level-4);
+  color: $text-muted;
+
+  &:not(button) {
+    height: 20px;
+  }
+  &.standalone {
+    &.default {
+      background: $component-background-default;
+      color: $component-color-default;
+    }
+    &.auto-refresh {
+      background: $component-pulse-color;
+      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-high);
+      color: var(--c8y-palette-gray-10);
+    }
+  }
+}
+
+.btn-icon-dot-set {
+  display: flex;
+  gap: $size-8;
+  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%;
+  appearance: none;
+  -webkit-user-select: none;
+  user-select: none;
+  border: 1px solid $form-control-border-color-default;
+  border-radius: $size-16 !important;
+  font-size: $font-size-small;
+  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;
+  }
+  &.active {
+    .default {
+      background: $component-background-default;
+      color: $component-color-default;
+    }
+    .auto-refresh {
+      background: $component-pulse-color;
+      color: var(--c8y-palette-high);
+    }
+    .time-context {
+      background: $status-info;
+      color: var(--c8y-palette-high);
+    }
+    .aggregation {
+      background: var(--c8y-palette-status-warning-high);
+      color: var(--c8y-palette-gray-10);
+    }
+  }
+}
+
+// spacing buttons outside btn-group
+.btn + .btn:not(.btn-block) {
+  margin-left: $size-base;
+}
+
+.d-flex, .d-col {
+  > .btn + .btn:not(.btn-block) {
+    margin: 0;
+  }
+}
+
+// Alternate buttons
+.btn-default {
+  @include buttons.button-variant(c8y-btn-default);
+  .datetime-picker & {
+    --c8y-btn-default-background-default: var(--c8y-form-control-background-default);
+  }
+}
+
+.btn-primary {
+  @include buttons.button-variant(c8y-btn-primary);
+}
+
+.btn-accent {
+  @include buttons.button-variant(c8y-btn-accent);
+  border-radius: $btn-border-radius-pill !important;
+}
+
+.btn-danger {
+  @include buttons.button-variant(c8y-btn-danger);
+}
+
+.btn-ai {
+  @include buttons.button-variant(c8y-btn-default);
+  position: relative;
+  overflow: hidden;
+  transition: all .2s ease;
+  border: 0;
+  color: $text-muted;
+
+  &::after {
+    content: "";
+    position: absolute;
+    left: 2px;
+    top: 2px;
+    width: calc(100% - 4px);
+    height: calc(100% - 4px);
+    background: var(--c8y-btn-default-background-default);
+    transition: all .2s ease;
+    border-radius: calc($btn-border-radius-base * .8);
+  }
+
+  &::before {
+    content: "";
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    width: 150%;
+    aspect-ratio: 1;
+    background-color: var(--c8y-btn-default-background-default);
+    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);
+    transform: translate(-50%, -50%);
+    opacity: .7;
+  }
+
+  >* {
+    z-index: 10;
+    position: relative;
+  }
+
+  >span {
+    position: relative;
+    padding-left: $size-16;
+    height: 100%;
+    overflow: visible;
+    opacity: 1;
+
+    &:empty {
+      padding-left: 0;
+      width: 100%;
+
+      &::before {
+        translate: 6px -50%;
+      }
+    }
+
+    &::before {
+      content: '';
+      position: absolute;
+      left: 0;
+      mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='24' height='24' fill='none'/%3E%3Cpath d='M9.03243 5.98167C9.1394 5.68167 9.54825 5.68167 9.65521 5.98167L11.4431 10.9961C11.4767 11.0904 11.5483 11.1648 11.6392 11.1997L16.4708 13.0552C16.7599 13.1662 16.7599 13.5905 16.4708 13.7015L11.6392 15.557C11.5483 15.5919 11.4767 15.6663 11.4431 15.7606L9.65521 20.775C9.54825 21.075 9.1394 21.075 9.03243 20.775L7.24458 15.7606C7.21095 15.6663 7.13929 15.5919 7.04841 15.557L2.2168 13.7015C1.92773 13.5905 1.92773 13.1662 2.2168 13.0552L7.04841 11.1997C7.13929 11.1648 7.21095 11.0904 7.24458 10.9961L9.03243 5.98167Z' fill='black' fill-opacity='1'/%3E%3Cpath d='M18.3291 3.225C18.436 2.925 18.8449 2.925 18.9518 3.225L19.6636 5.22123C19.6972 5.31555 19.7689 5.38992 19.8597 5.42482L21.7832 6.16349C22.0723 6.2745 22.0723 6.69882 21.7832 6.80983L19.8597 7.5485C19.7689 7.5834 19.6972 7.65776 19.6636 7.75208L18.9518 9.74831C18.8449 10.0483 18.436 10.0483 18.3291 9.74831L17.6173 7.75208C17.5837 7.65776 17.512 7.5834 17.4211 7.5485L15.4977 6.80983C15.2086 6.69882 15.2086 6.2745 15.4977 6.16349L17.4211 5.42482C17.512 5.38992 17.5837 5.31555 17.6173 5.22123L18.3291 3.225Z' fill='black' fill-opacity='1'/%3E%3Cpath d='M17.001 15.63C17.1079 15.33 17.5168 15.33 17.6237 15.63L17.9768 16.6202C18.0104 16.7145 18.0821 16.7889 18.1729 16.8238L19.127 17.1902C19.4161 17.3012 19.4161 17.7255 19.127 17.8365L18.1729 18.2029C18.0821 18.2378 18.0104 18.3122 17.9768 18.4065L17.6237 19.3967C17.5168 19.6967 17.1079 19.6967 17.001 19.3967L16.6479 18.4065C16.6143 18.3122 16.5426 18.2378 16.4518 18.2029L15.4977 17.8365C15.2086 17.7255 15.2086 17.3012 15.4977 17.1902L16.4518 16.8238C16.5426 16.7889 16.6143 16.7145 16.6479 16.6202L17.001 15.63Z' fill='black' fill-opacity='1'/%3E%3C/svg%3E%0A");
+      mask-size: 2ch;
+      mask-repeat: no-repeat;
+      mask-position: 0 center;
+      background-color: currentColor;
+      width: 2ch;
+      height: 2ch;
+      transform-origin: center;
+      transition: all .2s ease;
+      overflow: visible;
+      top: 50%;
+      translate: -6px -50%;
+    }
+  }
+
+  &.btn-lg {
+    &::after {
+      border-radius: calc($btn-border-radius-large * .8);
+    }
+
+    >span {
+      padding-left: $btn-padding-large-horizontal;
+    }
+  }
+
+  &.btn-sm {
+    &::after {
+      border-radius: calc($btn-border-radius-small * .8);
+    }
+
+    >span {
+      padding-left: $btn-padding-small-horizontal;
+    }
+  }
+
+  &.btn-xs {
+    &:after {
+      border-radius: calc($btn-border-radius-xs * .8);
+    }
+
+    >span {
+      padding-left: $btn-padding-xs-horizontal;
+    }
+  }
+
+  &:not(.btn-ai-hint) {
+    &:hover,
+    &:focus {
+      box-shadow: none !important;
+      border-color: transparent;
+      color: $text-color;
+
+      &::before {
+        animation: borderRotate 1s linear infinite;
+        opacity: .85;
+      }
+
+      &::after {
+        left: 3px;
+        top: 3px;
+        width: calc(100% - 6px);
+        height: calc(100% - 6px);
+        transition: all .2s ease;
+      }
+
+      >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-size: 50px 50px;
+        animation: symbolAnimation 2s linear infinite;
+        animation-direction: alternate-reverse;
+      }
+    }
+
+    &:active {
+      &::after {
+        background-color: var(--c8y-btn-default-background-active);
+      }
+    }
+
+    &:focus {
+      outline: 2px solid var(--c8y-btn-default-border-color-focus);
+    }
+  }
+}
+
+.btn-ai-hint, .btn-ai-hint.btn-dot {
+  pointer-events: none;
+  border-radius: $size-16  !important;
+  overflow: hidden;
+  color: $text-muted;
+  display: inline-flex;
+  align-items: center;
+  cursor: default !important;
+  border-color: transparent !important;
+  box-sizing: border-box;
+  box-shadow: none!important;
+  outline: 0!important;
+  flex-shrink: 0;
+  &::before{
+    animation: borderRotate 6s linear infinite;
+    opacity: .5!important;
+  }
+
+  &.working{
+    &::before{
+      animation: borderRotate .5s linear infinite;
+      opacity: 1!important;
+    }
+  }
+
+  &::after {
+    border-radius: $size-16  !important;
+  }
+
+  &.btn-lg {
+    border-radius: calc($btn-border-radius-large * 4) !important;
+
+    &::after {
+      border-radius: calc($btn-border-radius-large * 3.8) !important;
+    }
+  }
+  &.btn-sm {
+    padding: $btn-padding-small-horizontal 7px;
+    >span:empty::before{
+      translate: 0 -50%;
+    }
+  }
+
+  >span {
+    color: $text-color;
+    display: flex;
+    align-items: center;
+    pointer-events: auto;
+  }
+}
+
+@keyframes borderRotate {
+  100% {
+    transform: translate(-50%, -50%) rotate(1turn);
+  }
+}
+
+@keyframes symbolAnimation {
+
+  50% {
+    transform: scale(1.2);
+    background-position: bottom right;
+  }
+
+  100% {
+    transform: scale(1);
+    background-position: top left;
+  }
+}
+
+// btn without any padding or styling
+@mixin btn-clean() {
+  @include btn-base-reset();
+  @include btn-appearance-reset();
+  display: inline-block;
+  text-align: left;
+  white-space: nowrap;
+  color: inherit;
+  max-width: 100%;
+  user-select: none;
+  transition: all 0.25s ease;
+  
+  &:not(.form-control){
+    box-shadow: none;
+  }
+
+  &:hover {
+    text-decoration: none;
+    color: $component-brand-primary;
+  }
+
+  &:focus {
+    color: $component-brand-primary;
+    @include tab-focus.c8y-focus-inset();
+  }
+
+  &[disabled] {
+    &,
+    &:hover,
+    &:focus {
+      cursor: $cursor-disabled;
+      @include opacity.opacity(0.65);
+      box-shadow: none;
+    }
+  }
+}
+
+.btn-clean {
+  @include btn-clean();
+
+  &:not(.btn) {
+    padding: 0;
+  }
+
+  &.text-truncate {
+    max-width: 100%;
+  }
+}
+
+.btn-no-focus {
+  &:focus {
+    outline: none !important;
+  }
+}
+
+// inside labels (e.g. for help icon)
+label > .btn-clean {
+  vertical-align: baseline;
+}
+
+// Link buttons
+// Make a button look and behave like a link
+.btn-link {
+  min-width: 0;
+  border: none;
+  border-radius: 0;
+  background: transparent;
+  color: $link-color;
+  font-weight: normal;
+  height: auto;
+  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 {
+    color: inherit;
+  }
+
+  > i {
+    vertical-align: text-top;
+  }
+
+  &,
+  &:active,
+  &.active,
+  &[disabled],
+  fieldset[disabled] & {
+    background-color: transparent;
+    box-shadow: none;
+  }
+
+  &,
+  &:hover,
+  &:focus,
+  &:active {
+    border-color: transparent;
+  }
+
+  &:hover,
+  &:focus {
+    outline: none;
+    background-color: transparent;
+    color: $link-color-hover;
+    text-decoration: $link-hover-decoration;
+    cursor: pointer;
+  }
+
+  &:focus {
+    @include tab-focus.c8y-focus-inset();
+  }
+
+  &[disabled],
+  fieldset[disabled] & {
+    &:hover,
+    &:focus {
+      color: $btn-link-disabled-color;
+      text-decoration: none;
+      cursor: not-allowed;
+      pointer-events: none;
+    }
+  }
+}
+
+.btn-help {
+  min-width: 0;
+  border: none;
+  box-shadow: none;
+  transition: $btn-transition;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 24px;
+  width: 24px;
+  line-height: 1;
+  min-height: auto;
+  border-radius: 50%;
+  overflow: hidden;
+  flex-shrink: 0;
+  flex-grow: 0;
+  position: relative;
+  margin-left: 4px;
+  background-color: transparent;
+  --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-'] {
+    display: none;
+  }
+
+  &::before {
+    content: '';
+    position: absolute;
+    display: block;
+    inset: 4px;
+    background-color: var(--help-info-color);
+    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.82422 2.32422C6.46224 2.32422 7.00911 2.55208 7.46484 3.00781C7.92057 3.46354 8.14844 4.01042 8.14844 4.64844C8.14844 5.14062 7.85677 5.64648 7.27344 6.16602C6.6901 6.68555 6.39844 7.15495 6.39844 7.57422H5.25C5.25 7.15495 5.34115 6.79492 5.52344 6.49414C5.70573 6.19336 5.90625 5.97461 6.125 5.83789C6.34375 5.70117 6.54427 5.53255 6.72656 5.33203C6.90885 5.13151 7 4.90365 7 4.64844C7 4.33854 6.88151 4.06966 6.64453 3.8418C6.40755 3.61393 6.13411 3.5 5.82422 3.5C5.51432 3.5 5.24089 3.61393 5.00391 3.8418C4.76693 4.06966 4.64844 4.33854 4.64844 4.64844H3.5C3.5 4.01042 3.72786 3.46354 4.18359 3.00781C4.63932 2.55208 5.1862 2.32422 5.82422 2.32422ZM5.82422 10.5C7.10026 10.5 8.19857 10.0397 9.11914 9.11914C10.0397 8.19857 10.5 7.10026 10.5 5.82422C10.5 4.54818 10.0397 3.44987 9.11914 2.5293C8.19857 1.60872 7.10026 1.14844 5.82422 1.14844C4.54818 1.14844 3.44987 1.60872 2.5293 2.5293C1.60872 3.44987 1.14844 4.54818 1.14844 5.82422C1.14844 7.10026 1.60872 8.19857 2.5293 9.11914C3.44987 10.0397 4.54818 10.5 5.82422 10.5ZM5.82422 0C7.42839 0 8.80013 0.569661 9.93945 1.70898C11.0788 2.84831 11.6484 4.22005 11.6484 5.82422C11.6484 7.42839 11.0788 8.80013 9.93945 9.93945C8.80013 11.0788 7.42839 11.6484 5.82422 11.6484C4.22005 11.6484 2.84831 11.0788 1.70898 9.93945C0.569661 8.80013 0 7.42839 0 5.82422C0 4.22005 0.569661 2.84831 1.70898 1.70898C2.84831 0.569661 4.22005 0 5.82422 0ZM5.25 9.32422V8.14844H6.39844V9.32422H5.25Z' fill='currentColor'/%3E%3C/svg%3E%0A");
+    -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.82422 2.32422C6.46224 2.32422 7.00911 2.55208 7.46484 3.00781C7.92057 3.46354 8.14844 4.01042 8.14844 4.64844C8.14844 5.14062 7.85677 5.64648 7.27344 6.16602C6.6901 6.68555 6.39844 7.15495 6.39844 7.57422H5.25C5.25 7.15495 5.34115 6.79492 5.52344 6.49414C5.70573 6.19336 5.90625 5.97461 6.125 5.83789C6.34375 5.70117 6.54427 5.53255 6.72656 5.33203C6.90885 5.13151 7 4.90365 7 4.64844C7 4.33854 6.88151 4.06966 6.64453 3.8418C6.40755 3.61393 6.13411 3.5 5.82422 3.5C5.51432 3.5 5.24089 3.61393 5.00391 3.8418C4.76693 4.06966 4.64844 4.33854 4.64844 4.64844H3.5C3.5 4.01042 3.72786 3.46354 4.18359 3.00781C4.63932 2.55208 5.1862 2.32422 5.82422 2.32422ZM5.82422 10.5C7.10026 10.5 8.19857 10.0397 9.11914 9.11914C10.0397 8.19857 10.5 7.10026 10.5 5.82422C10.5 4.54818 10.0397 3.44987 9.11914 2.5293C8.19857 1.60872 7.10026 1.14844 5.82422 1.14844C4.54818 1.14844 3.44987 1.60872 2.5293 2.5293C1.60872 3.44987 1.14844 4.54818 1.14844 5.82422C1.14844 7.10026 1.60872 8.19857 2.5293 9.11914C3.44987 10.0397 4.54818 10.5 5.82422 10.5ZM5.82422 0C7.42839 0 8.80013 0.569661 9.93945 1.70898C11.0788 2.84831 11.6484 4.22005 11.6484 5.82422C11.6484 7.42839 11.0788 8.80013 9.93945 9.93945C8.80013 11.0788 7.42839 11.6484 5.82422 11.6484C4.22005 11.6484 2.84831 11.0788 1.70898 9.93945C0.569661 8.80013 0 7.42839 0 5.82422C0 4.22005 0.569661 2.84831 1.70898 1.70898C2.84831 0.569661 4.22005 0 5.82422 0ZM5.25 9.32422V8.14844H6.39844V9.32422H5.25Z' fill='currentColor'/%3E%3C/svg%3E%0A");
+  }
+
+  .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};
+    color: $palette-high;
+  }
+  .c8y-system-theme & {
+    @media (prefers-color-scheme: dark) {
+      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;
+    }
+  }
+
+  &:hover,
+  &:active {
+    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};
+  }
+
+  &: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};
+    color: $palette-high;
+  }
+
+  label &,
+  .legend &,
+  &--sm {
+    display: inline;
+    align-self: center;
+    height: 14px;
+    width: 14px;
+    &::before {
+      inset: 0;
+    }
+  }
+}
+
+label + .btn-help, label .btn-help {
+  display: inline;
+  align-self: center;
+  height: 14px;
+  width: 14px;
+  &::before {
+    inset: 0;
+  }
+}
+
+// Button Sizes
+.btn-lg {
+  @include buttons.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 {
+  @include buttons.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 {
+  @include buttons.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 {
+    line-height: 10px;
+  }
+
+  .list-group &,
+  .c8y-list__item & {
+    &:not(:hover) {
+      @extend .btn-default !optional;
+
+      &.btn-link {
+        background-color: transparent;
+      }
+    }
+  }
+
+  .badge {
+    position: absolute;
+    right: -8px;
+    top: -8px;
+  }
+}
+
+// Removed unused button sizing variant - verified 0 usages: .btn-40
+
+.btn-block {
+  display: block;
+  width: 100%;
+}
+
+// Vertically space out multiple block buttons
+.btn-block + .btn-block {
+  margin: $size-base 0 0 0;
+}
+
+// Specificity overrides
+input[type='submit'],
+input[type='reset'],
+input[type='button'] {
+  &.btn-block {
+    width: 100%;
+  }
+}
+
+// BUTTON PENDING
+.btn-pending {
+  &,
+  &:hover,
+  &:focus {
+    @include gradients.gradient-striped();
+    background-size: 40px 40px;
+    animation: progress-bar-stripes 0.5s linear infinite;
+    pointer-events: none !important;
+    outline: none !important;
+  }
+  &.btn-default {
+    &,
+    &:hover,
+    &:focus {
+      @include gradients.gradient-striped(var(--c8y-brand-70));
+    }
+  }
+  &.btn-danger {
+    &,
+    &:hover,
+    &:focus {
+      @include gradients.gradient-striped(var(--c8y-palette-status-danger-light));
+    }
+  }
+}
+
+// CUSTOM BUTTONS
+// SETTINGS
+.settings {
+  width: 40px;
+
+  .dropdown-toggle {
+    opacity: 0.7;
+
+    &:hover,
+    &:focus {
+      opacity: 1;
+    }
+
+    &:focus {
+      @include tab-focus.c8y-focus-inset();
+    }
+  }
+
+  &.open {
+    .dropdown-toggle {
+      opacity: 1;
+    }
+  }
+}
+
+.collapse-btn {
+  padding: 0;
+  width: calc($size-base * 5);
+  height: calc($size-base * 5);
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  border: 0;
+  background-color: transparent;
+  background-image: none;
+  color: $component-color-actions;
+  opacity: $component-actions-opacity;
+  user-select: none;
+  touch-action: manipulation;
+  transition: all 0.25s ease;
+  &:not(.btn-dot) {
+    font-size: 14px;
+  }
+
+  > i {
+    transition: all 0.25s ease;
+  }
+
+  &:hover,
+  &:focus {
+    text-decoration: none;
+    opacity: 1;
+    outline: 2px solid $component-color-focus;
+    outline-offset: -2px;
+  }
+
+  &:focus {
+    @include tab-focus.c8y-focus-inset();
+  }
+
+  &.active,
+  &[aria-expanded="true"],
+  .panel-open & {
+    color: $component-brand-primary;
+    opacity: 1 !important;
+
+    > i {
+      transform: rotate(180deg);
+      &.dlt-c8y-icon-chevron-right {
+        transform: rotate(90deg);
+      }
+    }
+  }
+}
+
+.btn-navbar {
+  padding: 3px $size-base;
+  color: $action-bar-color-actions;
+  opacity: 1;
+  background-color: transparent;
+
+  @media (max-width: $screen-xs-max) {
+    display: block;
+    padding: calc($size-base + 2) $size-16;
+    width: 100%;
+    max-width: 100%;
+    text-align: left;
+  }
+
+  &:focus {
+    color: var(--brand-primary, var(--c8y-brand-primary));
+    text-decoration: none;
+    @include tab-focus.c8y-focus-inset();
+  }
+
+  .c8y-icon,
+  [class^='dlt-c8y-icon-'],
+  [class*=' dlt-c8y-icon-'] {
+    color: $action-bar-color-actions;
+    opacity: $action-bar-actions-opacity;
+  }
+
+  &:hover,
+  &:active {
+    color: $action-bar-color-actions-hover;
+    text-decoration: none;
+
+    .c8y-icon,
+    > [class^='dlt-c8y-icon-'],
+    [class*=' dlt-c8y-icon-'] {
+      color: $action-bar-color-actions-hover;
+      opacity: 1;
+    }
+  }
+}
+
+// TODO: check if we still use this class
+.btn-add-block {
+  display: flex;
+  align-items: center;
+  margin-bottom: $size-16;
+  padding: calc($size-base + $size-4) $size-16;
+  width: 100%;
+  border: 0;
+  background-color: $component-background-default;
+  background-image: none;
+  color: $component-brand-primary;
+  text-decoration: none !important;
+  box-shadow: $elevation-sm;
+  transition: all 0.35s ease;
+
+  &[disabled],
+  &.disabled {
+    pointer-events: none;
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  [class^='dlt-c8y-icon-'],
+  [class*=' dlt-c8y-icon-'] {
+    color: $component-brand-primary;
+    font-size: 2em;
+    transition: transform 0.35s ease;
+    margin-right: $size-base;
+  }
+
+  &:hover {
+    box-shadow: $elevation-hover;
+
+    > [class^='dlt-c8y-icon-'],
+    [class*=' dlt-c8y-icon-'] {
+      transform: scale(1.1);
+    }
+  }
+
+  &:focus,
+  &:active {
+    outline: none;
+    box-shadow:
+      $elevation-hover,
+      inset 0 0 0 2px $component-brand-primary;
+  }
+
+  &.load-more {
+    align-items: center;
+    justify-content: center;
+    margin-top: $component-padding;
+    min-height: 56px;
+
+    > [class^='dlt-c8y-icon-'],
+    [class*=' dlt-c8y-icon-'] {
+      color: inherit;
+    }
+
+    &:hover {
+      color: var(--brand-primary, var(--c8y-brand-primary));
+    }
+  }
+}
+
+// btn checkbox
+.btn {
+  &[btnCheckbox],
+  &[uib-btn-checkbox],
+  &.c8y-btn-checkbox {
+    position: relative;
+    z-index: 2;
+    margin-right: 10px;
+    margin-bottom: 10px;
+    padding: 0 32px 0 16px;
+    height: $switch-height;
+    border: 0;
+    background-color: transparent;
+    line-height: 1;
+    color: var(--c8y-switch-handle-color);
+    box-shadow: none;
+    transition: all 0.25s ease;
+
+    * {
+      position: relative;
+      z-index: 1;
+    }
+
+    &:focus,
+    &:hover {
+      outline: none;
+      background-color: transparent;
+      background-image: none;
+    }
+
+    &:focus {
+      &::before {
+        @include tab-focus.c8y-focus();
+        border-radius: calc($switch-height / 2);
+      }
+    }
+
+    &::before {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      z-index: -1;
+      border-radius: calc($switch-height / 2);
+      background-color: $switch-background-default;
+      content: '';
+
+      transition: background 0.25s ease;
+    }
+
+    &::after {
+      content: '';
+      position: absolute;
+      top: 2px;
+      right: 18px;
+      bottom: 2px;
+      left: 2px;
+      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 rgba(black, math.div(20, 100));
+      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;
+
+      &::before {
+        background-color: $switch-background-active;
+        transition: background 0.25s ease;
+      }
+
+      &::after {
+        right: 2px;
+        left: 18px;
+        transition: all 0.25s ease;
+      }
+    }
+  }
+
+  &.c8y-btn-checkbox--inline {
+    margin: calc(-1 * $size-5) 0;
+    vertical-align: unset;
+  }
+}
+
+// Data grid buttons
+.btn-sort {
+  border: 0;
+  background: none;
+  padding: 0;
+  margin-right: 8px;
+}
+
+.btn-header {
+  border: 0;
+  background: none;
+  display: flex;
+  flex-grow: 1;
+  max-width: 100%;
+  height: 45px;
+
+  > span,
+  c8y-cell-renderer {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    flex-grow: 1;
+  }
+
+  .dlt-c8y-icon-filter {
+    display: none;
+    line-height: inherit;
+    margin-bottom: 1px;
+  }
+
+  &:hover,
+  &:focus,
+  .dropdown.open &,
+  .filtered & {
+    .dlt-c8y-icon-filter {
+      display: block;
+      opacity: 1;
+    }
+  }
+
+  .filtered & {
+    color: var(--brand-primary, var(--c8y-brand-primary)) !important;
+  }
+
+  &.c8y-dropdown {
+    display: flex;
+
+    &:before {
+      display: none;
+    }
+
+    .dropdown.open & {
+      background: white;
+      // .boxShadowHelper(4) !important;
+    }
+  }
+}
+
+.btn-sort {
+  opacity: 0;
+
+  > .dlt-c8y-icon-exchange {
+    transform: rotate(90deg);
+    margin-top: 4px;
+  }
+
+  &:hover {
+    color: var(--brand-primary, var(--c8y-brand-primary));
+  }
+
+  th:hover &,
+  .sorted & {
+    opacity: 1;
+  }
+
+  .sorted & {
+    color: var(--brand-primary, var(--c8y-brand-primary));
+  }
+}
+
+.btn-sort,
+.btn-header {
+  &:focus {
+    opacity: 1;
+    @include tab-focus.c8y-focus-inset();
+  }
+}
+
+.btnbar {
+  .btnbar-btn,
+  .dropdown .c8y-dropdown {
+    padding: calc($size-16 - 2px) $size-base;
+    color: $action-bar-color-default;
+    opacity: 1;
+    background: none;
+    border: 0;
+    white-space: nowrap;
+    min-width: fit-content;
+
+    @media (max-width: $screen-xs-max) {
+      display: block;
+      padding: calc($size-base + 2px) $size-16;
+      max-width: 100%;
+      text-align: left;
+    }
+
+    &:focus {
+      color: var(--brand-primary, var(--c8y-brand-primary));
+      text-decoration: none;
+      @include tab-focus.c8y-focus-inset();
+    }
+
+    .c8y-icon,
+    > [class^='dlt-c8y-icon-'],
+    [class*=' dlt-c8y-icon-'] {
+      opacity: 0.9;
+    }
+
+    &:hover,
+    &:active {
+      color: $link-color;
+      text-decoration: none;
+
+      .c8y-icon,
+      > [class^='dlt-c8y-icon-'],
+      [class*=' dlt-c8y-icon-'] {
+        opacity: 1;
+      }
+    }
+
+    .table-data-grid-header-bulk-actions & {
+      color: $component-background-active;
+      border-radius: $btn-border-radius-base;
+
+      &:focus {
+        @include tab-focus.c8y-focus-inset();
+        outline-color: $component-background-active;
+      }
+
+      &:hover,
+      &:active {
+        color: var(--c8y-brand-7);
+        text-decoration: none;
+        outline: 1px solid $component-background-active;
+        .c8y-icon,
+        > [class^='dlt-c8y-icon-'],
+        [class*=' dlt-c8y-icon-'] {
+          opacity: 1;
+        }
+      }
+    }
+  }
+}
+
+.btn--caret {
+  display: flex;
+  align-items: center;
+  > i {
+    transform: translateX(-7px);
+  }
+}
+
+@container (max-width: 310px) {
+  .device-status-btn span {
+    display: none;
+  }
+}