@import "../../../variables/_dlt-c8y-icons-vars.less";

/**
 * Input Groups - Form input groups with addons and buttons
 *
 * Note: Uses @form-control-*, @input-group-addon-*, and @size-* tokens.
 *
 * Intentionally hardcoded values:
 * - Border widths (1px): Standard borders
 * - Negative margins (-1px): Fine-tuning for overlapping borders
 * - Component-specific sizes (32px, 39px, 40px, 230px): Fixed component dimensions
 * - Typography sizes (12px, 14px): Font sizes
 * - Off-token spacing (12px): Legacy spacing not in token system
 * - Line-height values (1, 32px, 40px): Specific alignments
 * - Fine-tuning offsets (3ch, 6px): Precise positioning
 * - Z-index values: Layering
 * - Percentages (50%, 100%): Layout calculations
 * - Calc expressions: Complex computed values
 * - Transition durations (0.25s): Animation timing
 * - Opacity values: Visual effects
 * - RGBA values: Semi-transparent colors
 */

// Shared mixin for flex container with centered alignment
.flex-center() {
  display: flex;
  align-items: center;
}

.input-group {
  position: relative; // For dropdowns
  display: flex;
  align-items: stretch;
  flex-wrap: nowrap;
  width: 100%;

  // Undo padding and float of grid classes
  &[class*='col-'] {
    float: none;
    padding-right: 0;
    padding-left: 0;
  }

  .form-control+.form-control {
    margin-left: -1px;
  }

  >.form-control,
  >.c8y-select-wrapper,
  >.form-group,
  >div[c8y-device-group-selector] {
    position: relative;
    z-index: 2;
    flex: 1 1 auto;
    margin-bottom: 0;
    height: @form-control-height-base !important;
    min-width: 0;

    &:not(:first-child) {
      margin-left: -1px;
    }
  }

  >.color-input {
    flex-grow: 0;
    flex-basis: 39px;
  }

  .form-control.inner-scroll {
    box-shadow: none;
    border: 1px solid @form-control-border-color-default;
    padding-top: 0;
    padding-bottom: 0;
    align-items: center;
    background-color: @form-control-background-default;

    >.tag {
      align-self: unset;
      flex-shrink: 0;
    }
  }

  c8y-software-type {
    flex-grow: 1 !important;

    c8y-typeahead .input-group input {
      flex-grow: 1 !important;
    }
  }

  &.typeahead>div:not(.input-group-btn) {
    flex: 1;

    .form-control {
      width: 100%;
    }
  }
}

.input-group-addon {
  .flex-center();
  padding: @form-control-padding-base-vertical @form-control-padding-base-horizontal;
  border-radius: @form-control-border-radius;
  background-color: @form-control-border-color-default;
  color: @form-control-color-default;
  font-weight: @form-control-font-weight;
  font-size: @font-size-base;
  font-family: @form-control-font-family;
  line-height: @form-control-line-height;
  height: @form-control-height-base;

  &.inner-scroll {
    max-width: 230px;
    height: 32px;
    margin-left: -1px;
  }

  .form-group-sm &,
  .input-group-sm &,
  &.input-sm {
    padding: @form-control-padding-small-vertical @form-control-padding-small-horizontal;
    font-size: @font-size-small;
    height: @form-control-height-sm;
  }

  .form-group-lg &,
  .input-group-lg &,
  &.input-lg {
    padding: @form-control-padding-large-vertical @form-control-padding-large-horizontal;
    font-size: @font-size-large;
    height: @form-control-height-lg;
  }

  label.c8y-checkbox,
  label.c8y-radio {
    margin: 0;
    line-height: 1;

    input[type='checkbox']+span::before,
    input[type='radio']+span::before {
      margin: 0;
    }
  }
}

.input-group-btn {
  display: flex;
  align-items: stretch;
  max-height: @form-control-height-base;

  &:not(:first-child) {
    margin-left: -1px;
  }

  &--last,
  +.input-group-btn {
    margin-left: -1px;
  }

  .input-group-sm & {
    max-height: @form-control-height-sm;
  }

  >.btn-default {
    --c8y-btn-default-background-default: @{form-control-background-default};
  }
}

.input-group-addon,
.input-group-btn,
.form-control {
  &:not(:first-child):not(:last-child) {
    border-radius: 0;
  }

  .btn:not(.btn-dot) {
    border-radius: @form-control-border-radius;
  }
}

// search with round corners
.input-group.input-group-search,
.input-group-search .input-group {
  display: flex !important;

  .form-control {

    &,
    &:first-child,
    &:last-child {
      padding-right: calc(@form-control-height-base + @form-control-padding-base-horizontal) !important;
      padding-left: calc(@form-control-padding-base-horizontal * 2);
      border-radius: calc(@form-control-height-base * 0.5);
    }
  }

  .form-control.input-lg {

    &,
    &:first-child,
    &:last-child {
      padding: @form-control-padding-large-vertical calc(@form-control-padding-large-horizontal * 2);
      border-radius: @form-control-height-base;
      font-size: @font-size-large;
    }
  }

  &:has(.input-group-btn > .btn + .btn) {
    .form-control {

      &,
      &:first-child,
      &:last-child {
        padding-right: calc(@form-control-height-base + @form-control-padding-base-horizontal * 4) !important;
      }
    }
  }

  .input-group-btn,
  .input-group-addon {
    position: absolute;
    right: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    min-width: @form-control-height-base;
    height: @form-control-height-base;
    border: 0;
    background-color: transparent;

    .btn {
      width: 100%;
      height: 100%;
      line-height: 1;
      border-radius: calc(@form-control-height-base * 0.5);
      text-overflow: initial;

      &:hover {
        box-shadow: inset 0 0 0 2px @component-brand-primary;
      }
    }
  }

  &.input-group-sm,
  .input-group-sm & {
    .form-control:not(.c8y-radio):not(.c8y-checkbox) {
      padding-left: 12px;
    }

    .input-group-btn,
    .input-group-addon,
    .form-group {
      height: @form-control-height-sm !important;
    }
  }

  &.input-group-lg {

    .input-group-btn,
    .input-group-addon {
      height: @form-control-height-lg;
      max-height: unset;

      .btn {
        border-radius: @form-control-height-base !important;
        min-width: @form-control-height-lg;
      }
    }
  }
}

.input-group.input-group--dots {
  display: flex;
  align-items: center;
  border-radius: calc(@form-control-height-base * 0.5);
  height: @form-control-height-base;
  border: 1px solid @form-control-border-color-default;
  padding: var(--c8y-form-control-padding-base-vertical);
  gap: @size-8;
  font-size: @font-size-small;
}

.input-group-search {
  .input-group-btn>.btn {
    border-top-right-radius: calc(@form-control-height-base * 0.5) !important;
    border-bottom-right-radius: calc(@form-control-height-base * 0.5) !important;
  }

  &.input-group-lg {
    .input-group-btn>.btn {
      border-top-right-radius: @form-control-height-base !important;
      border-bottom-right-radius: @form-control-height-base !important;
    }
  }
}

//smaller search input when using the c8y-search-input component
c8y-search-input.input-group-sm {
  .input-group-search {

    .form-control,
    .input-group-addon,
    .input-group-btn>.btn {

      // Inline .input-sm styles (was @extend .input-sm)
      &:not(.c8y-radio):not(.c8y-checkbox) {
        padding: @form-control-padding-small-vertical @form-control-padding-small-horizontal;
        height: @form-control-height-sm !important;
        font-size: @font-size-small;
        line-height: @line-height-small;
      }
    }
  }

  // add smaller left and right margins in the search dropdown
  c8y-li.m-l-32.m-r-32 {
    margin-left: @size-8 !important;
    margin-right: @size-8 !important;
  }
}

.input-group.input-group-password {
  display: flex !important;

  .form-control {

    &,
    &:first-child,
    &:last-child {
      padding-right: calc(@form-control-height-base + @form-control-padding-base-horizontal);
      padding-left: @form-control-padding-base-horizontal;
    }
  }

  .input-group-btn,
  .input-group-addon {
    position: absolute;
    right: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    min-width: @form-control-height-base;
    height: 100%;
    max-height: unset;
    border: 0;
    background-color: transparent;

    .btn {
      width: 100%;
      height: 100%;
    }
  }

  &.input-group-sm {
    .form-control:not(.c8y-radio):not(.c8y-checkbox) {
      padding-left: 12px;
    }

    .input-group-btn,
    .input-group-addon {
      height: @form-control-height-sm;
    }
  }
}

// dropdown without round corners
.input-group.input-group-dropdown {

  .input-group-btn,
  .input-group-addon {
    position: absolute;
    right: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    min-width: @form-control-height-base;
    height: @form-control-height-base;
    border: 0;
    background-color: transparent;

    .btn {
      width: 100%;
      height: 100%;
      border: 0;
      border-radius: @form-control-border-radius;

      +.btn {
        margin-left: 0;
      }
    }
  }

  &.input-group-sm {

    .input-group-btn,
    .input-group-addon {
      height: @form-control-height-sm;
    }
  }
}

// Reset rounded corners
.input-group .form-control:first-child,
.input-group-addon:first-child,
.input-group-btn:first-child>.btn,
.input-group-btn:first-child>.btn-group>.btn,
.input-group-btn:first-child>.dropdown-toggle,
.input-group-btn:last-child>.btn:not(:last-child):not(.dropdown-toggle):not(.btn-dot),
.input-group-btn:last-child>.btn-group:not(:last-child)>.btn {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.input-group .form-control:last-child,
.input-group-addon:last-child,
.input-group-btn:last-child>.btn:not(.btn-dot),
.input-group-btn:last-child>.btn-group>.btn,
.input-group-btn:last-child>.dropdown-toggle,
.input-group-btn:first-child>.btn:not(:first-child),
.input-group-btn:first-child>.btn-group:not(:first-child)>.btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

//Input group editable
// supports a save button and a cancel button inside a input-group
.input-group-editable {
  position: relative;

  textarea.form-control {
    max-height: unset;
  }

  input[type='number']:not(:focus) {
    -moz-appearance: textfield;

    &::-webkit-inner-spin-button {
      margin: 0;
      -webkit-appearance: none;
    }
  }

  .form-control, .form-control:first-child{
    field-sizing: content;
    min-width: 3ch;
    max-width: 100%;
    width: auto;
    transition: all 0.25s ease;
    flex: 0 1 auto;

    + span{
      opacity: 1;
      transition: all 0.25s ease;
      display: flex;
      align-items: flex-end;
        &::after {
          z-index: 5;
          display: inline-block;
          align-self: center;
          margin-left: calc(-1 * @size-8);
          color: @component-brand-primary;
          opacity: 1;
          line-height: @form-control-height-base;
          transition: all 0.25s ease;
          content: @dlt-c8y-icon-pencil;
          font-family: @icon-font-family;
          font-style: normal;
          font-weight: normal;
          text-rendering: auto;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
        }
      }
    
    &:hover, &:focus-within{
      + span {
        opacity: 0;
      }
    }
  }
  .form-control:not(:hover):not(:focus):not(.ng-dirty) {
    z-index: 2;
    overflow: hidden;
    margin-right: 12px;
    padding-left: 0;
    padding-right: 0;
    border-radius: @form-control-border-radius;
    width: auto;
    background-color: transparent;
    box-shadow: none;
    text-overflow: ellipsis;
    + span{
      display: flex;
      align-items: flex-end;
    }
    &[disabled],
    &[read-only] {
      width: 100%;
      +span::after {
        opacity: 0;
      }
    }
  }
  .input-group-btn{
    opacity: 0;
    pointer-events: none;
    transition: all 0.25s ease;
    padding: @size-4;
    display: flex;

    .btn-clean {
      position: relative;
      padding: 0!important;
      width: auto;
      margin: 0!important;
      max-height: unset;
      height: auto!important;
      aspect-ratio: 1;
      border-radius: 50%!important;
      display: flex;
      align-items: center;
      justify-content: center;
      align-self: stretch;

      &::after {
        position: absolute;
        top: 50%;
        left: -4px;
        display: block;
        margin-top: calc(-1 * @size-10);
        width: 1px;
        height: @size-20;
        background-color: rgba(@black, (10 / 100));
        content: '';
      }
      &:last-child::after {
        display: none;
      }
    }
  }
  &:has(.ng-dirty){
    .input-group-btn{
      opacity: 1;
      pointer-events: auto;
      z-index: 10;
      margin: 0;
    }
  }
  &:not(:has(.form-control:hover)):not(:focus-within) {
    textarea.form-control {
      resize: none;
    }
  }
  .form-control.ng-dirty{
    padding-right: calc(@form-control-height-base * 2)!important;
    border-top-right-radius: @form-control-height-sm;
    border-bottom-right-radius: @form-control-height-sm;
    + span{
      opacity: 0;
    }
    ~.input-group-btn {
      max-height: unset;
      height: @form-control-height-base;
      margin-left: calc(@form-control-height-base * -2);
      align-items: stretch;
      .btn{
        height: unset!important;
      }
    }
  }
  &.input-group-sm,
  .form-group-sm & {
    .form-control.ng-dirty{
      padding-right: calc(@form-control-height-sm * 2)!important;
      border-top-right-radius: @form-control-height-sm;
      border-bottom-right-radius: @form-control-height-sm;
      + span{
        opacity: 0;
      }
      ~.input-group-btn {
        height: @form-control-height-sm;
        margin-left: calc(@form-control-height-sm * -2);
        .btn{
          height: unset!important;
        }
      }
    }
    .form-control:not(.ng-dirty)+span::after {
      line-height: @form-control-height-sm;
    }
  }

  &.input-group-lg,
  .form-group-lg & {
    .form-control.ng-dirty{
      padding-right: calc(@form-control-height-lg * 2)!important;
      border-top-right-radius: @form-control-height-lg;
      border-bottom-right-radius: @form-control-height-lg;
      + span{
        opacity: 0;
      }
      ~.input-group-btn {
        height: @form-control-height-lg;
        margin-left: calc(@form-control-height-lg * -2);
        .btn{
          height: unset!important;
        }
      }
    }
    .form-control:not(.ng-dirty)+span::after {
      line-height: @form-control-height-lg;
    }
  }
}

// Sizing options
// Remix the default form control sizing classes into new ones for easier manipulation.
.input-group-lg>.form-control,
.input-group-lg>.input-group-addon,
.input-group-lg>.input-group-btn>.btn,
.input-group-search.input-group-lg .input-group>.form-control,
.input-group-search.input-group-lg .input-group-btn>.btn {

  // Inline .input-lg styles (was @extend .input-lg)
  &:not(.c8y-radio):not(.c8y-checkbox) {
    padding: @form-control-padding-large-vertical @form-control-padding-large-horizontal;
    max-height: unset !important;
    height: @form-control-height-lg !important;
    font-size: @font-size-large;
  }
}

.input-group-lg>.form-group {
  height: @form-control-height-lg !important;
}

.input-group-sm>.form-control,
.input-group-sm>.input-group-addon,
.input-group-sm>.input-group-btn>.btn {

  // Inline .input-sm styles (was @extend .input-sm)
  &:not(.c8y-radio):not(.c8y-checkbox) {
    padding: @form-control-padding-small-vertical @form-control-padding-small-horizontal;
    height: @form-control-height-sm !important;
    font-size: @font-size-small;
    line-height: @line-height-small;
  }
}
.input-group-sm > .form-group,
.input-group-sm > .c8y-select-wrapper {
  height: @form-control-height-sm !important;
}

// Text input groups
.input-group-addon {
  padding: @form-control-padding-base-vertical @form-control-padding-base-horizontal;
  border: 1px solid @input-group-addon-border-color;
  border-radius: @form-control-border-radius;
  background-color: @input-group-addon-background-default;
  color: @form-control-color-default;
  text-align: center;
  font-weight: normal;
  font-size: @font-size-base;
  line-height: 1;

  &.input-sm {
    padding: @form-control-padding-small-vertical @form-control-padding-small-horizontal;
    border-radius: @form-control-border-radius;
    font-size: @font-size-small;
  }

  &.input-lg {
    padding: @form-control-padding-large-vertical @form-control-padding-large-horizontal;
    border-radius: @form-control-border-radius;
    font-size: @font-size-large;
  }

  input[type='radio'],
  input[type='checkbox'] {
    margin-top: 0;
  }
}

// Button input groups
.input-group-btn {
  position: relative; // Jankily prevent input button groups from wrapping with `white-space` and
  white-space: nowrap; // Negative margin for spacing, position for bringing hovered/focused/actived
  // `font-size` in combination with `inline-block` on buttons.
  font-size: 0;

  .btn+.btn {
    margin-left: 0;
  }

  // element above the siblings.
  >.btn {
    position: relative;
    padding: @size-5 12px;
    height: 100%;

    // Bring the "active" button to the front
    &:hover,
    &:focus,
    &:active {
      z-index: 2;
    }

    &.btn-default:not(:focus) {
      border-color: @form-control-border-color-default;
    }

    &.btn-link[disabled] {
      color: @component-color-disabled !important;
      opacity: @form-control-disabled-opacity !important;
      cursor: @cursor-disabled !important;
      pointer-events: auto !important;
    }
  }

  // No negative margins to show the complet input border
  &:first-child {

    >.btn,
    >.btn-group {
      margin-right: 0;
      border-right-color: rgba(@black, (15 / 100));
    }

    >.btn:last-child {
      // border-right: 0;
    }
  }

  &:last-child {

    >.btn:not(:focus),
    >.btn-group {
      z-index: 2;
      // border-left-color: rgba(@black, 15/100);
    }

    >.btn:focus {
      margin-left: -1px;
    }
  }

  &:not(:first-child) {
    >.btn:first-child:not(:focus) {
      // border-left: 0;
    }
  }
}

// input-group-array for formly array.type.component
.input-group-array {
  @media screen and (min-width: @screen-sm-min) {
    display: flex;
  }

  .form-group {
    position: relative;
  }

  .form-group,
  .input-group-btn {
    margin-bottom: @size-4;
  }

  // @TODO: JAWI validate
  >.input-group-btn.delete-row {
    margin-top: @size-24;
  }

  formly-field {
    flex-grow: 1;
  }

  +.input-group-array {
    .input-group-btn {
      margin-top: 0;
    }

    .form-group>label {
      display: none;
    }
  }
}

// modifier classes for formly
.formly-group-array-cols {
  .input-group-array {
    gap: @size-base;

    >formly-field {
      display: contents;

      >formly-group {
        display: contents;
      }
    }

    formly-field {
      flex-basis: 50%;
    }
  }
}

formly-field label.c8y-checkbox {
  margin: @size-base 0;
}

c8y-lwm2m-legend-wrapper formly-field {
  >c8y-field-checkbox {
    display: flex;
    align-items: center;
    margin: 0 0 @size-8 0;

    & label.c8y-switch {
      display: flex !important;
      overflow: visible;
      align-items: center;
    }
  }
}

// EXTENDABLE INPUT LIST
[c8yinputgrouplistcontainer]>li:not(:last-child) .input-group-btn>.btn.text-primary {
  display: none;
}