@c8y/style/styles/core/buttons/_buttons.less

Styles for Cumulocity IoT applications

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

  // btns containing just an icon
  > i {
    vertical-align: text-top;
  }

  &,
  &:active,
  &.active {
    &:focus,
    &.focus {
      outline: none;

      &.dropdown-toggle {
        .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;
  align-items: center;

  &:hover,
  &:focus,
  &:active {
    .btn-focus-outline();
  }

  &:focus {
    border-radius: @component-border-radius-focus !important;
    opacity: 1 !important;
  }
}

.btn-dot {
  .btn-base-reset();
  .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 {
    .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 {
    .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 {
  .button-variant(c8y-btn-default);
  .datetime-picker & {
    --c8y-btn-default-background-default: var(--c8y-form-control-background-default);
  }
}

.btn-primary {
  .button-variant(c8y-btn-primary);
}

.btn-accent {
  .button-variant(c8y-btn-accent);
  border-radius: @btn-border-radius-pill !important;
}

.btn-danger {
  .button-variant(c8y-btn-danger);
}

.btn-ai {
  .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
.btn-clean() {
  .btn-base-reset();
  .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;
    .c8y-focus-inset();
  }

  &[disabled] {
    &,
    &:hover,
    &:focus {
      cursor: @cursor-disabled;
      .opacity(0.65);
      box-shadow: none;
    }
  }
}

.btn-clean {
  .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 {
    .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 {
  .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);
}

.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);
  position: relative;

  > .icon-spin {
    line-height: 10px;
  }

  .list-group &,
  .c8y-list__item & {
    &:not(:hover) {
      &:extend(.btn-default);

      &.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 {
    .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 {
      .gradient-striped(var(--c8y-brand-70));
    }
  }
  &.btn-danger {
    &,
    &:hover,
    &:focus {
      .gradient-striped(var(--c8y-palette-status-danger-light));
    }
  }
}

// CUSTOM BUTTONS
// SETTINGS
.settings {
  width: 40px;

  .dropdown-toggle {
    opacity: 0.7;

    &:hover,
    &:focus {
      opacity: 1;
    }

    &: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 {
    .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;
    .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 {
        .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, 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;

      &::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(md, right);
    }
  }
}

.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;
    .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;
      .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 {
        .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;
  }
}