@import '../../common/styles/_abstract-control';

.bloko-control-group {
    display: inline-table;
    width: 100%;
    vertical-align: middle;
}

.bloko-control-group_auto-size {
    width: auto;
}

.bloko-control-group_vertical {
    display: flex;
    flex-direction: column;
}

.bloko-control-group__main,
.bloko-control-group__minor,
.bloko-control-group__content-sized {
    display: table-cell;
    vertical-align: top;

    .abstract-control-group-item-elements();
}

.bloko-control-group__vertical-item {
    .bloko-button,
    .bloko-input-text,
    .bloko-select,
    .bloko-custom-select__select,
    .bloko-input-text-wrapper > .bloko-input-text {
        position: relative;
        margin-top: -1px;
        border-radius: 0;
    }

    &:first-child {
        .bloko-button,
        .bloko-input-text,
        .bloko-select,
        .bloko-custom-select__select,
        .bloko-input-text-wrapper > .bloko-input-text {
            margin-top: 0;
            border-top-left-radius: @control-border-radius;
            border-top-right-radius: @control-border-radius;
        }
    }

    &:last-child {
        .bloko-button,
        .bloko-input-text,
        .bloko-select,
        .bloko-custom-select__select,
        .bloko-input-text-wrapper > .bloko-input-text {
            border-bottom-left-radius: @control-border-radius;
            border-bottom-right-radius: @control-border-radius;
        }
    }
}

._icon-in-group() {
    .bloko-icon-dynamic,
    .bloko-icon-link,
    .bloko-icon {
        z-index: 4;
    }
}

.bloko-control-group__main,
.bloko-control-group__minor,
.bloko-control-group__content-sized,
.bloko-control-group__vertical-item {
    /* stylelint-disable selector-max-compound-selectors */
    .bloko-button_invalid,
    .bloko-select_invalid,
    .bloko-input-text_invalid,
    .bloko-custom-select_invalid .bloko-custom-select {
        z-index: 1;
    }

    .bloko-button:hover,
    .bloko-select:hover,
    .bloko-custom-select:hover .bloko-custom-select__select,
    .bloko-input-text-wrapper:hover,
    .bloko-input-text:hover {
        z-index: 2;
    }

    .bloko-button:focus,
    .bloko-button:active,
    .bloko-input-text:focus,
    .bloko-select:focus,
    .bloko-custom-select__select:focus,
    .bloko-custom-select__select_focus {
        z-index: 3;
    }
    /* stylelint-enable */

    ._icon-in-group();
}

:global(.bloko-control-group__main),
:global(.bloko-control-group__minor),
:global(.bloko-control-group__content-sized),
:global(.bloko-control-group__vertical-item) {

    ._icon-in-group();
}

.bloko-control-group__main {
    width: 100%;
}

// Классы для мажорных элементов. которые должны быть равны по ширине
// Два одинаковых по ширине элемента
.bloko-control-group__main_col-1-2 {
    width: 50%;
}

// Три одинаковых по ширине элемента
.bloko-control-group__main_col-1-3 {
    width: 33.3333%;
}

.bloko-control-group__minor {
    width: 1%;
}