@import '~antd/lib/grid/style/index';
@import '../../ag-grid/index';
@import '../../tree/index';

@import '../../../index';
@import '../../../../../mixins/index';

@btn-prefix-cls: ~'@{ant-prefix}-btn';

.@{ps-transfer-prefix-cls} {
    &-treetogrid {
        display: flex;
        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: 100%;
        .@{ant-prefix}-row-flex-middle {
            display:flex;
            flex-grow: 1;
            flex-shrink: 1;
            flex-basis: 100%;
            flex-direction: column;
            .@{ps-transfer-prefix-cls} {
                &-source {
                    display: flex;
                    flex-direction: column;
                    flex-grow: 1;
                    flex-shrink: 1;
                    flex-basis: 100%;
                    border: @border-width-base @border-style-base @gray-3;
                }
                &-button {
                    display: flex;
                    flex-direction: column;
                    flex-grow: 1;
                    flex-shrink: 1;
                    flex-basis: 100%;
                    justify-content: center;
                    margin: 0 25px;
                    .button-right,
                    .button-left {
                        text-align: center;
                        margin: 10px 0;
                        .@{btn-prefix-cls} {
                            border-radius: 30px;
                            width: 28px;
                            &:hover {
                                background: @primary-5;
                                color: @white;
                            }
                            i {
                                font-size: 20px;
                            }
                        }
                        .@{ps-button-prefix-cls}-container {
                            .@{ps-button-prefix-cls} {
                                &.btn-icon {
                                    padding: 0;
                                }
                            }
                        }
                    }
                }
                &-target {
                    display: flex;
                    flex-direction: column;
                    flex-grow: 1;
                    flex-shrink: 1;
                    flex-basis: 100%;
                    border: @border-width-base @border-style-base @gray-3;
                }
            }
        }
    }
}