@use "../../../../variables/index" as *;
@use "../../../../variables/dlt-c8y-icons-vars";
@use "../../../mixins/icon-base";
@use "../../../mixins/list-group";
@use "../../../mixins/tab-focus";
@use "../../../mixins/vendor-prefixes";

/**
 * List Group - Bootstrap list group component (legacy)
 *
 * Note: Uses $size-* tokens for spacing, $size-base for calculations, and $component-padding.
 *
 * Intentionally hardcoded values:
 * - Off-token spacing (6px): Badge offsets not in token system
 * - Border widths (1px): Standard borders
 * - Negative offsets (-1px, -2px): Fine-tuning
 * - Percentages (100%): Layout
 * - Line-height values: Text alignment
 * - Box-shadow values: Borders and inset shadows
 * - Transform values: Translate positioning
 */

.list-group {
  position: relative;
  margin-bottom: $size-16;
  padding-left: 0; // reset padding because ul and ol
  box-shadow: inset 0 1px 0 $component-border-color;

  &.borderless,
  &.borderless-top {
    box-shadow: none !important;
  }
}

// Individual list items
// Use on `li`s or `div`s within the `.list-group` parent.
.list-group-item {
  position: relative;
  display: block;
  padding: $size-base $component-padding;
  min-height: calc($size-base * 5);
  width: 100%;
  border: 0;
  box-shadow: inset 0 -1px 0 $component-border-color;


  &.draggable-after {
    position: relative;
    display: flex;
    align-items: center;
    > button:last-child {
      margin-right: calc($size-base * -0.5);
    }
    > * {
      flex-grow: 1;
    }
    &:hover,
    .cdk-drag-preview & {
      &:after {
        @include icon-base.dlt-c8y-icon;
        position: absolute;
        left: 0;
        flex-grow: 0;
        margin-left: 0;
        content: dlt-c8y-icons-vars.$dlt-c8y-icon-drag-reorder;
        pointer-events: none;
      }
    }
  }
  &.ng-enter {
    background-color: $component-realtime-added;
  }
  &:last-child {
    margin-bottom: 0;
  }
  .borderless & {
    box-shadow: none !important;
  }
  > .c8y-checkbox,
  > .c8y-radio {
    line-height: inherit;
  }
}

// remove list group margin and list-group-item left and right borders inside panels and cards
.card,
.panel,
.modal-content {
  .list-group {
    margin-bottom: 0;
    box-shadow: none;
    .list-group-item {
      margin: 0;
      padding: $size-base $component-padding;
      border: 0;
      box-shadow: inset 0 -1px 0 $component-border-color;
      &:not(.active):not(.expanded) {
        background: transparent;
      }
      &:last-child {
        box-shadow: none;
      }
    }
    a.list-group-item:not(.active),
    button.list-group-item:not(.active) {
      &:hover {
        background-color: $component-background-active;
      }
      &:focus {
        @include tab-focus.c8y-focus-inset();
      }
    }
  }
}

.list-group-links {
  button.list-group-item,
  a.list-group-item {
    position: relative;
    padding-right: calc($size-base * 4) !important;
    //color: inherit;
    &:hover,
    &:focus {
      background-color: $component-background-active;
      color: $component-color-active;
    }
    &::after {
      position: absolute;
      top: 50%;
      right: calc($size-base + $size-4);
      display: inline-block;
      color: inherit;
      content: dlt-c8y-icons-vars.$dlt-c8y-icon-chevron-right;
      font: normal normal normal 14px/1 dlt-c8y-icons-vars.$icon-font-family;
      font-size: inherit;
      transform: translate(0, -50%);

      text-rendering: auto;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
  }
}

// Interactive list items
//
// Use anchor or button elements instead of `li`s or `div`s to create interactive items.
// Includes an extra `.active` modifier class for showing selected items.
a.list-group-item,
button.list-group-item {
  width: 100%;
  color: $component-color-actions;
  text-align: left;
  .list-group-item-heading {
    color: $component-brand-primary;
  }
  &:hover,
  &:focus {
    outline: none;
    color: $component-color-actions-hover;
    text-decoration: none;
  }
}

.list-group-item {
  &.disabled,
  &.disabled:hover,
  &.disabled:focus {
    background-color: $component-background-disabled;
    color: $component-color-disabled;
    cursor: $cursor-disabled;
    .list-group-item-heading {
      color: inherit;
    }
    .list-group-item-text {
      color: $component-color-disabled;
    }
  } // Active class on item itself, not parent
  &.active,
  &.active:hover,
  &.active:focus {
    z-index: 2; // Place active items above their siblings for proper border styling
    border-color: transparent;
    border-right: 0; // Force color to inherit for custom content
    border-left: 0;
    background-color: $component-background-active;
    color: $component-color-active;
    .list-group-item-heading,
    .list-group-item-heading > small,
    .list-group-item-heading > .small {
      color: inherit;
    }
    .list-group-item-text {
      color: $component-color-active;
    }
  }
}

// Contextual variants
//
// Add modifier classes to change text and background color on individual items.
// Organizationally, this must come after the `:hover` states.
@include list-group.list-group-item-variant(success, $state-success-bg, $component-background-default);
@include list-group.list-group-item-variant(info, $state-info-bg, $state-info-text);
@include list-group.list-group-item-variant(warning, $state-warning-bg, $component-background-default);
@include list-group.list-group-item-variant(danger, $state-danger-bg, $component-background-default);
@include list-group.list-group-item-variant(active, $brand-primary, $component-background-default);

// Custom content options
// Extra classes for creating well-formatted content within `.list-group-item`s.
.list-group-item-heading {
  margin-top: 0;
  margin-bottom: $size-base;
}

.list-group-item-text {
  margin-bottom: 0;
  line-height: 1.3;
}

.list-item-body {
  flex: 1;

  overflow-wrap: anywhere;
}

.list-item-icon {
  display: inline-block;
  flex: 0 0 auto;
  margin-right: $size-8;
  max-height: $size-20;
  font-size: $size-20;
  line-height: 1;
  > i {
    transform: translateY(-3px);
  }
}

.list-item-checkbox {
  align-self: flex-start;
  flex: 0 0 auto;
  margin-right: $size-8;
  .c8y-checkbox {
    height: $size-20;
    line-height: $size-20;
  }

  + label {
    overflow: hidden;
    flex: 1;
    margin-bottom: 0;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    font-size: inherit;
    line-height: 1.1;
    cursor: pointer;

    overflow-wrap: break-word;
  }
}

.list-item-actions {
  position: relative;
  display: flex;
  align-self: flex-start;
  flex: 0 0 auto;
  flex-flow: row nowrap;
  order: 10000; //ensure it is the last item on the right
  margin: calc($size-base * -1 + 2px) calc($component-padding * -1) calc($size-base * -1 + 2px)
    0;
  text-align: right;
  .btn + .btn {
    margin: 0;
  }
  > .has-error {
    position: absolute;
    left: calc(-1 * $size-10);
    height: $size-40;
    color: var(--palette-status-danger, var(--c8y-palette-status-danger));
    font-size: 14px;
    line-height: $size-40;
  }
  > .btn-link,
  .settings > .dropdown-toggle {
    order: 100;
    padding: 6px;
    width: $size-40;
    height: $size-40;
    color: $component-color-actions;
    font-size: 14px;
    opacity: $component-actions-opacity;

    @include vendor-prefixes.transition(all 0.25s ease);
    &:hover,
    &:focus {
      outline: none;
      text-decoration: none;
      opacity: 1;
    }
  }
  label.c8y-checkbox,
  label.c8y-radio {
    line-height: $size-40 !important;
  }
}

.list-group-item {
  &.flex-row,
  > .flex-row {
    display: flex;
    align-items: flex-start;
    flex-flow: row wrap;
  }
  &.collapsible,
  .collapsible {
    @include vendor-prefixes.transition(all 0.25s ease);
    &.expanded {
      z-index: 10;
      //background-color: $expanded-bg-color;
    }
    .collapse,
    .collapsing {
      flex: 1 1 100%;
      order: 11000;
      margin: $size-10 calc($component-padding * -1) 0;
      padding: 0 $component-padding $component-padding;
      min-width: 100%;
      width: auto;
      // box-shadow: $inner-shadow1;
    }
  }
}

.list-item-switch {
  flex: 0 0 48px;
  width: 48px;
  .c8y-switch {
    margin: 1px 0 calc(-1 * $size-10) 0;
    min-height: 23px;
    input[type='checkbox'] + span {
      top: 0;
    }
  }
}

.list-item-colopicker {
  flex: 0 0 30px;
  width: 30px;
}

.list-item-colorpicker {
  position: relative;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 30px;
  -ms-flex: 0 0 30px;
  flex: 0 0 30px;
  text-align: center;
  .minicolors {
    margin: 0 auto;
    min-height: $size-20;
    width: $size-20;
    .minicolors-swatch {
      width: $size-20;
      border: 0;
    }
    .minicolors-swatch-color {
      top: 0;
      bottom: 0;
      border-radius: 14px;
    }
  }
  + .list-item-body {
    padding-top: 3px;
  }
}

// modifier class to remove borders when using sticky-header
.list-group-item-sticky-header {
  box-shadow: inset 0 -1px 0 $component-border-color!important;
}