$baseClass: '.dl-dialog-filter';

@mixin veil($opacity) {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: var(--g-color-base-float);
    opacity: $opacity;
}

#{$baseClass} {
    &__filter-select {
        display: flex;
        height: 100%;
        overflow: hidden;
    }

    &__select-column {
        position: relative;
        height: 100%;

        &_left {
            width: calc(50% + 1px);
            border-right: 1px solid var(--g-color-line-generic);
        }

        &_right {
            width: calc(50% - 1px);
        }

        &_disabled::after {
            @include veil(0.5);
        }
    }

    &__select-column-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 10px 30px;
        font-size: var(--g-text-body-2-font-size);
        line-height: var(--g-text-body-2-line-height);
    }

    &__select-column-items {
        display: flex;
        height: calc(100% - 48px);

        & .g-list .g-list__filter {
            margin: 0 30px 10px;
        }

        &_disabled .g-list__items::after {
            @include veil(1);
        }
    }

    &__select-column-item {
        display: flex;
        align-items: center;
        width: 100%;
        height: 100%;
        padding-left: 32px;
        cursor: pointer;

        &:hover #{$baseClass}__select-column-item-description {
            display: block;
        }
    }

    &__select-column-item-label {
        flex: 1 1 auto;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;

        &_empty {
            font-style: italic;
            opacity: 0.5;
        }
    }

    &__select-column-item-description {
        display: none;
        flex: 0 0 110px;
        text-align: center;
        color: var(--g-color-text-secondary);
    }

    &__select-column-loader {
        position: absolute;
        bottom: 0;
        left: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: calc(100% - 86px);
        z-index: 1;
    }
}
