@use '../../../styles/mat-selectors' as ms;

$adf-columns-selector-space: 12px;

@mixin adf-columns-selector-side-padding {
    padding: 0 $adf-columns-selector-space;
}

@mixin adf-columns-selector-top-bottom-padding {
    padding: $adf-columns-selector-space 0;
}

adf-datatable-column-selector {
    .adf-columns-selector {
        @include adf-columns-selector-top-bottom-padding;

        min-width: 277px;

        &-header {
            @include adf-columns-selector-side-padding;

            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        &-header-label {
            font-size: var(--theme-body-1-font-size);
        }

        &-list-container {
            max-height: 350px;
            overflow: hidden auto;
            margin-left: -16px;
        }

        &-list-content {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            display: block;
            width: 210px;
            color: var(--theme-secondary-text);
        }

        &-subtitle {
            color: var(--adf-theme-foreground-text-color);
            font-size: var(--theme-caption-font-size);
            opacity: 0.6;
            display: flex;
            column-gap: 3px;
            align-items: center;
        }

        &-subtitle-icon {
            margin-top: 3px;
            height: var(--theme-caption-font-size);
            width: var(--theme-caption-font-size);
            font-size: var(--theme-caption-font-size);
        }

        &-column-checkbox {
            padding: 0 20px;
            display: flex;
            flex-direction: row-reverse;
            padding-left: 0;
            align-items: center;
            height: auto;

            #{ms.$mat-list-item-end} {
                margin-right: -5px;
            }
        }

        &-footer {
            @include adf-columns-selector-side-padding;

            display: flex;
            justify-content: flex-end;
        }

        &-divider {
            margin: 16px 0;
        }

        &-search-input-form {
            display: flex;
            padding: 10px 12px 0;
        }
    }
}