.#{$ns}TransferSelectControl {
    display: flex;
    height: px2rem(300px);

    .#{$ns}TransferSelect {
        &-allOptions,
        &-selectedOptions {
            height: 100%;
            flex: 1;
            border: $borderWidth solid $borderColor;
            overflow: auto;

            .#{$ns}TransferSelect-heading {
                position: relative;
                height: px2rem(40px);
                line-height: px2rem(40px);
                padding-left: px2rem(20px);
                border-bottom: $TransferSelect-heading-borderBottom;
            }

            .#{$ns}TransferSelect-body {
                table tbody tr td,
                ul li {
                    position: relative;
                }

                ul {
                    margin: 0;
                    padding: 0;
                    padding-top: px2rem(10px);
                }

                li {
                    height: px2rem(30px);
                    line-height: px2rem(30px);
                    list-style: none;
                    padding-left: px2rem(20px);
                }
            }

            .#{$ns}TransferSelect-selectAll,
            .#{$ns}TransferSelect-clearAll {
                position: absolute;
                right: 20px;
                cursor: pointer;
                color: $primary;
            }

            .#{$ns}TransferSelect-searchWrapper {
                i {
                    height: px2rem(17px);
                    line-height: px2rem(17px);
                }
            }
        }

        &-allOptions {
            &--table {
                .#{$ns}TransferSelect-heading {
                    background-color: $TransferSelect--table-heading-bg;
                    display: flex;
                }

                .#{$ns}TransferSelect-searchWrapper {
                    display: inline-block;
                    padding: px2rem(3px) px2rem(10px);
                    flex: 1;
                    margin-left: px2rem(30px);
                }
            }

            &--normal {
                .#{$ns}TransferSelect-heading {
                    background-color: $TransferSelect--normal-heading-bg;
                }

                .#{$ns}TransferSelect-searchWrapper {
                    padding: px2rem(10px) px2rem(20px);
                }
            }
        }

        &-selectedOptions {
            &--table {
                .#{$ns}TransferSelect-heading {
                    background-color: $TransferSelect--table-heading-bg;
                }
            }

            &--normal {
                .#{$ns}TransferSelect-heading {
                    background-color: $TransferSelect--normal-heading-bg;
                }
            }
        }

        &-option-close {
            width: px2rem(12px);
            height: px2rem(12px);
            position: absolute;
            right: px2rem(20px);
            cursor: pointer;
        }

        &-action {
            padding: 0 px2rem(20px);

            .#{$ns}TransferSelect-actionIcon {
                display: inline-block;
                width: 0;
                height: 0;
                border-top: px2rem(12px) solid transparent;
                border-left: px2rem(12px) solid #b7b7b7;
                border-bottom: px2rem(12px) solid transparent;
                position: relative;
                top: calc(50% - 6px);
            }
        }
    }
}