@import '../../common/styles/_checkable-control';
@import '../../common/styles/_abstract-icon';
@import '../icon/icon';
@import '../form/form';
@import '../radio/radio';
@import '../checkbox/checkbox';
@import './treeSelectorSelectedList';

@padding-icon: @icon-padding-link;
@indent: @icon-size-16 + @padding-icon;

/**
Схема расположения контролов и отступов :)
  |← Переменная @indent == 2 пробела
  ▶ — Иконка открытия
  ■ — Чекбокс

▶ has-children
    ■ has-action
    plain
  ▶ has-children
    ■ has-action
      plain
  ▶ ■ has-children-has-action
      ■ has-action
      plain

▶ ■ has-children-has-action
    ■ has-action
    plain
  ▶ has-children
    ■ has-action
      plain
  ▶ ■ has-children-has-action
      ■ has-action
      plain
 */

// Если класс используется только в комбинации с другими,
// стили в JS возвращают undefined. Поэтому добавляем фейковый стиль.
.bloko-tree-selector-item,
.bloko-tree-selector-item_has-children-has-action,
.bloko-tree-selector-item_no-children {
    border-width: 0;
}

// Все дочерние сдвинуты на один отступ
.bloko-tree-selector__items {
    padding-left: @indent;
}

// Если у элемента есть иконка или контрол, они занимают место
// и визуально сдвигают элемент. А если ничего нет, сдвигаем его вручную.
.bloko-tree-selector-item_no-children-no-action {
    margin-left: @indent;
}

// Если у элемента есть И иконка, И контрол, он сдвинут на два отступа,
// и его дочерние элементы также нужно сдвинуть на дополнительный отступ,
// за исключением элементов с потомками, их сдвигает иконка открытия.
.bloko-tree-selector-item_has-children-has-action {
    margin-left: (@checkable-control-size - @icon-size-16) / 2;
    /* stylelint-disable-next-line scss/selector-no-redundant-nesting-selector */
    & > .bloko-tree-selector__items > .bloko-tree-selector-item_no-children {
        margin-left: @indent + (@checkable-control-size - @icon-size-16) / 2;
    }
}

.bloko-tree-selector-item-content {
    margin: @vertical-form-indent 0;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;

    @media @screen-gt-s {
        margin-top: 0;
    }
}

.bloko-tree-selector-item-icon {
    width: 25px;
    display: table;
    flex-shrink: 0;

    &:empty {
        width: 0;
        height: 0;
    }
}

.bloko-tree-selector-item__text {
    display: inline-block;
    cursor: pointer;
}

.bloko-tree-selector-item-spacer {
    display: table-cell;
    padding-right: @padding-icon;
    vertical-align: top;
}

.bloko-tree-selector-item-spacer_legacy {
    vertical-align: text-top;
}

.bloko-tree-selector-content {
    display: table;
}

.bloko-tree-selector-after-label {
    padding-left: @indent;
}

.bloko-tree-selector-after-label_parent-without-action {
    padding-left: 0;
}

.bloko-tree-selector-after-label_parent-with-action {
    padding-left: @indent + @indent;
}