@import '../modal/modal';
@import '../form/form';
@import '../treeSelector/treeSelector';
@import '../gap/gap';
@import '../inputText/inputText';
@import '../button/button';
@import '../../common/styles/_abstract-modal';
@import '../../common/styles/_column-variables';
@import '../../common/styles/_indent-variables';
@import '../../common/styles/colors';
@import '../../common/styles/text-base';
@import '../../common/styles/spacing-base';

.bloko-tree-selector-popup {
    width: 620px;
    height: 423px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    flex-grow: 1;
    margin-top: -10px;
    padding-left: 10px;
    margin-left: -10px;
}

.bloko-tree-selector-popup__with-selected {
    @media @screen-gt-xs {
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
}

.bloko-tree-selector-popup-content {
    box-sizing: border-box;
    padding-right: @column-padding;
    padding-top: 10px;
}

.bloko-tree-selector-popup-content__with-selected {
    @media @screen-gt-xs {
        overflow: auto;
    }
}

.bloko-tree-selector-popup-search {
    margin-top: 10px;
}

.bloko-tree-selector-popup-result {
    width: 100%;

    @media @screen-gt-xs {
        width: 620px;
    }
}

.bloko-tree-selector-popup-result-list {
    padding-bottom: @modal-container-padding - @vertical-form-indent;
    margin-bottom: @modal-header-bottom-margin;
    border-bottom: 1px solid @color-gray-30;

    @media @screen-gt-xs {
        max-height: 150px;
        overflow: auto;
    }
}

.bloko-tree-selector-popup-not-found {
    margin-bottom: @vertical-form-indent;
}

.bloko-tree-selector-popup-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.bloko-tree-selector-popup-footer-extra {
    margin-right: auto;
    text-align: left;
}

@media @screen-lt-s {
    :global(.xs-friendly) {
        .bloko-tree-selector-popup {
            width: 100%;
            height: auto;
        }

        .bloko-tree-selector-popup-search {
            margin: 10px -@modal-padding-xs;
            padding: @modal-vertical-padding-xs @modal-padding-xs;
            border: solid @color-gray-20;
            border-width: 1px 0;
            background: @color-gray-10;
        }
    }
}

.bloko-tree-selector-popup-hint {
    margin-top: @spacing-base;
}