@import "wot-design-uni/components/common/abstracts/variable";
@import "wot-design-uni/components/common/abstracts/mixin";
.wot-theme-dark {
    @include b(col-picker) {
        @include when(border) {
            .wd-col-picker__cell {
                @include halfPixelBorder("top", $-cell-padding, $-dark-border-color);
            }
        }

        @include e(label) {
            color: $-dark-color;
        }

        @include e(cell) {
            color: $-dark-color;
            background-color: $-dark-background2;

            @include when(disabled) {
                .wd-col-picker__value {
                    color: $-dark-color3;
                }
            }
        }

        @include e(list-item) {
            @include when(disabled) {
                color: $-dark-color3;
            }
        }

        @include e(list-item-tip) {
            color: $-dark-color-gray;
        }

        @include e(value) {
            color: $-dark-color;

            @include m(placeholder) {
                color: $-dark-color-gray;
            }
        }
        :deep(.wd-col-picker__arrow) {
            color: $-dark-color;
        }

        @include e(list) {
            color: $-dark-color;
        }

        @include e(selected) {
            color: $-dark-color;
        }
    }
}
.tags {
    gap: 32rpx;
    padding: 0 32rpx;
    div {
        padding: 8rpx 16rpx;
        font-size: 24rpx;
        color: #4d80f0;
        background-color: #4d80f01f;
    }
}

@include b(col-picker) {
    @include when(border) {
        .wd-col-picker__cell {
            @include halfPixelBorder("top", $-cell-padding);
        }
    }

    @include e(cell) {
        position: relative;
        display: flex;
        align-items: flex-start;
        padding: $-cell-wrapper-padding $-cell-padding;
        overflow: hidden;
        font-size: $-cell-title-fs;
        line-height: $-cell-line-height;
        color: $-cell-title-color;
        text-decoration: none;
        background-color: $-color-white;
    }

    @include e(cell) {
        @include when(disabled) {
            .wd-col-picker__value {
                color: $-input-disabled-color;
            }
        }

        @include when(align-right) {
            .wd-col-picker__value {
                text-align: right;
            }
        }

        @include when(error) {
            .wd-col-picker__value {
                color: $-input-error-color;
            }
            :deep(.wd-col-picker__arrow) {
                color: $-input-error-color;
            }
        }

        @include when(large) {
            font-size: $-cell-title-fs-large;
            :deep(.wd-col-picker__arrow) {
                font-size: $-cell-icon-size-large;
            }
        }
    }

    @include e(error-message) {
        font-size: $-form-item-error-message-font-size;
        line-height: $-form-item-error-message-line-height;
        color: $-form-item-error-message-color;
        text-align: left;
        vertical-align: middle;
    }

    @include e(label) {
        position: relative;
        box-sizing: border-box;
        width: $-input-cell-label-width;
        margin-right: $-cell-padding;
        color: $-cell-title-color;

        @include when(required) {
            padding-left: 12px;
            &::after {
                position: absolute;
                top: 2px;
                left: 0;
                font-size: $-cell-required-size;
                line-height: 1.1;
                color: $-cell-required-color;
                content: "*";
            }
        }
    }

    @include e(value-wraper) {
        display: flex;
    }

    @include e(value) {
        flex: 1;
        margin-right: 10px;
        color: $-cell-value-color;

        @include when(ellipsis) {
            @include lineEllipsis;
        }

        @include m(placeholder) {
            color: $-input-placeholder-color;
        }
    }

    @include e(body) {
        flex: 1;
    }

    @include edeep(arrow) {
        display: block;
        font-size: $-cell-icon-size;
        line-height: $-cell-line-height;
        color: $-cell-arrow-color;
    }

    @include e(selected) {
        height: $-col-picker-selected-height;
        overflow: hidden;
        font-size: $-col-picker-selected-fs;
        color: $-col-picker-selected-color;
    }

    @include e(selected-container) {
        position: relative;
        display: flex;
        user-select: none;
    }

    @include e(selected-item) {
        flex: 0 0 auto;
        height: $-col-picker-selected-height;
        padding: $-col-picker-selected-padding;
        line-height: $-col-picker-selected-height;

        @include when(selected) {
            font-weight: $-col-picker-selected-fw;
        }
    }

    @include e(selected-line) {
        position: absolute;
        bottom: 5px;
        left: 0;
        z-index: 1;
        width: $-col-picker-line-width;
        height: $-col-picker-line-height;
        background: $-col-picker-line-color;
        border-radius: calc($-col-picker-line-height / 2);
        box-shadow: $-col-picker-line-box-shadow;
    }

    @include e(list-container) {
        position: relative;
    }

    @include e(list) {
        box-sizing: border-box;
        height: $-col-picker-list-height;
        padding-bottom: $-col-picker-list-padding-bottom;
        overflow: auto;
        font-size: $-col-picker-list-fs;
        color: $-col-picker-list-color;
        -webkit-overflow-scrolling: touch;
    }

    @include e(list-item) {
        display: flex;
        align-items: flex-start;
        padding: $-col-picker-list-item-padding;

        @include when(selected) {
            color: $-col-picker-list-color-checked;
            :deep(.wd-col-picker__checked) {
                opacity: 1;
            }
        }

        @include when(disabled) {
            color: $-col-picker-list-color-disabled;
        }
    }

    @include e(list-item-label) {
        line-height: 1.285;
    }

    @include e(list-item-tip) {
        margin-top: 2px;
        font-size: $-col-picker-list-fs-tip;
        color: $-col-picker-list-color-tip;
    }

    @include edeep(checked) {
        display: block;
        margin-left: 4px;
        font-size: $-col-picker-list-checked-icon-size;
        color: $-col-picker-list-color-checked;
        opacity: 0;
    }

    @include e(loading) {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
