@import "../lib.less";
@import "../variables/components/transfer.less";
@import "../variables/components/checkbox.less";

.@{veui-prefix}-filter-panel {
    overflow: hidden;
    border: 1px solid @veui-transfer-border-color;
    border-radius: @veui-transfer-border-radius;
    width: @veui-transfer-panel-width-m;

    &-title {
        display: flex;
        align-items: center;
        background: @veui-transfer-header-background-color;
        .padding(_, @veui-transfer-padding-x-right, _, @veui-transfer-padding-x-left);
        color: @veui-transfer-header-font-color;
        font-weight: @veui-transfer-header-font-weight;
        font-size: @veui-transfer-font-size-m;
        margin: 0;
        height: @veui-transfer-header-height-m;

        .@{veui-prefix}-button {
            font-weight: @veui-transfer-header-button-font-weight;
            &[ui~="text"][ui~="strong"].@{veui-prefix}-disabled {
                color: @veui-transfer-item-remove-color-disabled;
            }
        }
    }

    .@{veui-prefix}-search-box {
        margin: 0;
        width: 100%;
        flex: none;

        .@{veui-prefix}-input {
            .padding(_, @veui-transfer-padding-x-right, _, @veui-transfer-padding-x-left);
            .border-style(none, none, solid, none);
            .border-color(_, _, @veui-transfer-border-color, _);
            border-radius: 0;
            &.@{veui-prefix}-focus {
                box-shadow: none;
                .border-color(_, _, @veui-transfer-border-color-focus, _);
            }
        }
    }

    &-no-data {
        display: flex;
        align-items: center;
        justify-content: center;
        color: @veui-font-color-weak;
        height: @veui-transfer-item-height-m;
        padding-top: @veui-transfer-content-padding-y;
    }

    &-single-level {
        .@{veui-prefix}-tree.@{veui-prefix}-tree .@{veui-prefix}-tree-item-label {
            margin-left: 0;
        }
    }

    &-content {
        display: flex;
        flex-direction: column;
        border-top: 1px solid @veui-transfer-border-color;
        height: @veui-transfer-content-min-height-m;

        &-main {
            overflow-y: auto;
            position: relative;
            padding: @veui-transfer-content-padding-y 0;

            .@{veui-prefix}-tree {
                .padding(_, @veui-transfer-padding-x-right, _, @veui-transfer-padding-x-left);

                &-item-remove {
                    color: @veui-transfer-tree-item-remove-color;
                }
            }
        }
    }

    &[ui~="s"] {
        font-size: @veui-transfer-font-size-s;
        width: @veui-transfer-panel-width-s;

        .@{veui-prefix}-filter-panel {
            &-title {
                height: @veui-transfer-header-height-s;
                font-size: @veui-transfer-font-size-s;
            }

            &-no-data {
                height: @veui-transfer-item-height-s;
            }

            &-content {
                height: @veui-transfer-content-min-height-s;
            }
        }
    }
}