@c8y/style/styles/_buttons.less

Styles for Cumulocity IoT applications

.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;
  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: 4px;
    align-items: center;
  }
}

.btn-icon {
  padding-left: @btn-padding-icon-horizontal!important;
  padding-right: @btn-padding-icon-horizontal!important;
  height: @form-control-height-base;

  &:hover,
  &:focus,
  &:active {
    outline: 2px solid @component-brand-primary !important;
    outline-offset: -2px;
  }

  &:focus {
    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;
  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;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: @form-control-height-base;
  color: @brand-primary;

  &.btn {
    height: @form-control-height-base;
    transition: none;
    .c8y-list__item &,
    .cdk-cell & {
      height: calc(@margin-base * 5);
      margin-top: -10px;
      margin-bottom: -10px;
      display: flex;
    }
  }

  &:hover,
  &:focus,
  &:active {
    outline: 2px solid @component-brand-primary!important;
    outline-offset: -2px;
  }

  &: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: @status-danger;
  }

  &.btn-dot--warning {
    color: @status-warning;
  }

  &.btn-dot--info {
    color: @status-info;
  }

  &.btn-dot--success {
    color: @status-success;
  }
}

// spacing buttons outside btn-group
.btn + .btn:not(.btn-block) {
  margin-left: @margin-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 without any padding or styling
.btn-clean {
  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);
  transition: all 0.25s ease;

  &:not(.btn){
    padding: 0;
  }

  &:hover {
    text-decoration: none;
    color: @component-brand-primary;
  }

  &:focus {
    color: @component-brand-primary;
    .c8y-focus-inset();
  }

  &.text-truncate {
    max-width: 100%;
  }

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

.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) !important;
  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 !important;
  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: @status-info;
  color: @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 @status-info;
    background-color: @status-info;
    --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;
      color: @palette-high;
    }
  }

  &:hover,
  &:active {
    outline: 1px solid @status-info;
    outline-offset: 0;
    background-color: @status-info;
    --help-info-color: @palette-high;
  }

  &:focus {
    outline: 1px solid @status-info;
    background-color: @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) {
      .btn-default();

      &.btn-link {
        background-color: transparent;
      }
    }
  }

  .badge {
    position: absolute;
    right: -8px;
    top: -8px;
  }
}

.btn-40 {
  .button-size(@btn-padding-vertical; @btn-padding-horizontal; @btn-font-size-base;
    @btn-line-height-base; 0; @margin-40 );
  min-width: 40px;
}

.btn-block {
  display: block;
  width: 100%;
}

// Vertically space out multiple block buttons
.btn-block + .btn-block {
  margin: @margin-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(@margin-base * 5);
  height: calc(@margin-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 {
      .rotate(180deg);
      &.dlt-c8y-icon-chevron-right {
        .rotate(90deg);
      }
    }
  }
}

.btn-navbar {
  padding: 3px @margin-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;
    width: 100%;
    max-width: 100%;
    text-align: left;
  }

  &:focus {
    color: @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: @margin-16;
  padding: calc(@margin-base + @margin-4) @margin-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: @margin-base;
  }

  &:hover {
    box-shadow: @elevation-hover;

    > [class^='dlt-c8y-icon-'],
    [class*=' dlt-c8y-icon-'] {
      .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: @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) !important;

    * {
      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 fade(black, 20%));
      .transition(all 0.25s ease) !important;
    }

    &.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: -5px 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: @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: @brand-primary;
  }

  th:hover &,
  .sorted & {
    opacity: 1;
  }

  .sorted & {
    color: @brand-primary;
  }
}

.btn-sort,
.btn-header {
  &:focus {
    opacity: 1;
    .c8y-focus-inset();
  }
}

.btnbar {
  .btnbar-btn,
  .dropdown .c8y-dropdown {
    padding: calc(@margin-16 - 2px) @margin-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(@margin-base + 2px) @margin-16;
      max-width: 100%;
      text-align: left;
    }

    &:focus {
      color: @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;
  }
}