@use '../../styles/variables';

.thy-transfer {
    display: flex;
    width: variables.$transfer-width;

    .thy-transfer-list {
        display: flex;
        flex-flow: column;
        flex: 1;
        width: variables.$transfer-list-width;

        .thy-transfer-list-header {
            padding: variables.$transfer-list-header-padding;
            width: 100%;

            .thy-transfer-list-header-title {
                color: variables.$transfer-list-header-font-color;
                font-size: variables.$transfer-list-header-font-size;
            }
        }

        .thy-transfer-list-body {
            border: variables.$transfer-list-border-width solid variables.$transfer-list-border-color;
            border-radius: variables.$transfer-list-border-radius;
            padding: variables.$transfer-list-padding;
            height: variables.$transfer-list-height;
            vertical-align: middle;
            overflow-y: auto;

            .thy-transfer-list-group-name {
                padding: 12px 20px;
                color: variables.$gray-500;
                line-height: 14px;
            }
        }

        .thy-transfer-list-content {
            padding: 0;
            overflow: initial;
            .cdk-drop-list-empty {
                margin: -12px 0;
                padding: 12px 20px;
                background: variables.$bg-default;
            }
            .thy-transfer-list-content-item {
                padding-right: 15px;
                height: variables.$transfer-list-item-line-hight;
                min-height: variables.$transfer-list-item-line-hight;
            }
        }
    }

    .thy-transfer-operation {
        padding: variables.$transfer-operation-padding;
        display: flex;
        align-items: center;

        .thy-transfer-operation-body {
            .operation-link {
                display: block;
                color: variables.$transfer-operation-color;
                font-size: variables.$transfer-operation-font-size;
            }
        }
    }
}

.thy-transfer-list-content-item {
    .list-item-content {
        width: 100%;
        display: flex;
        align-items: center;
        flex-grow: 1;
    }
    .item-name {
        flex: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        .flexible-text-container {
            display: block;
        }
    }
    .un-select-item {
        margin-right: 14px;
    }

    .cdk-drag-handle,
    .drag-handle {
        position: absolute;
    }

    .item-status {
        font-size: 14px;
    }
}
