@import "../../../mixins/_c8y-scrollbar.less";

/**
 * C8Y Asset Selector - Tree-based asset selector component
 *
 * Note: Uses @size-* tokens; @size-base for calculations, and @form-control-* variables.
 *
 * Intentionally hardcoded values:
 * - Off-token spacing (6px, 22px): Tree indentation and positioning not in token system
 * - Border widths (1px, 2px): Standard borders and outlines
 * - Negative offsets (-2px): Fine-tuning
 * - Percentages (100%): Layout
 * - Transform rotation (90deg): Icon rotation
 * - Z-index values (1, 10): Stacking order
 */

c8y-asset-selector{
  .c8y-scrollbar();
  overflow-y: auto;
  display: block;
  max-height: 100%;
}

.collapse .c8y-asset-selector__item {
  position: relative;
  padding-left: @size-8;
  &::after {
    position: absolute;
    top: @size-32;
    left: 22px;
    bottom: @size-32;
    display: block;
    border-left: 1px solid @component-icon-dark-color-light;
    content: '';
  }

  .c8y-asset-selector__item {
    &::before {
      border-left: 1px solid @component-icon-dark-color-light;
      border-bottom: 1px solid @component-icon-dark-color-light;
      border-top: 0;
      content: "";
      height: @size-16;
      position: absolute;
      transform: translate(calc(-1 * @size-10), 0);
      width: @size-24;
      z-index: 1;
    }
  }
}

.c8y-asset-selector__item--more{
  &::before,
  &::after {
    display: none;
  }
  .c8y-asset-selector__node__btn-spacer{
    display: none;
  }
  .btn.btn-default::before {
    position: absolute;
    top: calc(-1 * @size-16);
    left: calc(-1 * @size-4);
    z-index: 10;
    display: block;
    width: @size-5;
    height: @size-32;
    background: @component-background-default;
    content: '';
  }
}

.c8y-asset-selector {
  &__node {
    display: flex;
    max-height: @size-32;
    min-width:fit-content;
    .collapse-btn {
      height: @size-32;
      width: @size-32;
      opacity: 1;
      
      &:focus {
        outline: 2px solid @component-brand-primary;
        outline-offset: -2px;
      }
    }
    &__btn-spacer{
      width: @size-32;
      z-index: 1;
    }

    &--open {
      .collapse-btn > i {
        color: @component-brand-primary;
        transform: rotate(90deg);
      }
    }

    .dropdown-menu &{
      .collapse-btn{
        background-color: var(--c8y-dropdown-background-default);
      }
    }
  }
 
 

  &__btn {
    display: inline-block !important;
    align-items: center;
    flex-grow: 1;
    margin-bottom: 0;
    padding: 6px @size-8;
    max-width: 100%;
    border: 0;
    background-color: transparent;
    background-image: none;
    box-shadow: none;
    color: inherit;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;

    touch-action: manipulation;
    appearance: none;
    user-select: none;
    &:focus {
      outline: 2px solid @component-brand-primary;
      outline-offset: -2px;
    }
  }
}

.c8y-asset-selector__item--start > .collapse > c8y-asset-selector-node > .c8y-asset-selector__item{

  > .c8y-asset-selector__node > .btn.btn-default::before{
    display: none;
  }
}
.c8y-asset-selector__item--start:after {
 left: 22px;
}

c8y-asset-selector c8y-search-input .input-group {
  .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);
      height: @form-control-height-sm !important;
    }
  }
  .input-group-btn > .btn{
    border-top-right-radius: @form-control-height-sm !important;
    border-bottom-right-radius: @form-control-height-sm !important;
  }
}

.c8y-asset-selector__item--start {
  .c8y-asset-selector__node + .collapse {
    .c8y-asset-selector__item {
      margin-left: 16px !important;
    }
    >.c8y-asset-selector__item {
      margin-left: 24px !important;
    }
  }
}

c8y-widget-asset-selector .card{
  background: inherit;
  margin-bottom: 0;
}