$idutyInput: __iduty_input;

.#{$idutyInput} {
    padding: px2rem(10) 0;
    border-bottom: 0.5px solid $ui-border-gray;

    $lh: px2rem(35);
    $fs: px2rem(14);

    .that_clear {
        font-family: $iconFont;
        color: #ccc;
        font-size: px2rem(12);
        background: #eee;
        border-radius: 100%;
        @include wh(px2rem(18));
        @include flexcenter();
    }

    // 水平风格
    &.horizontal {
        display: flex;
        align-items: center;
    
        .that_label {
            font-weight: 600;
            font-size: px2rem(14);
            line-height: px2rem(30);
            color: #222;
        }
    
        .#{$idutyInput}_text {
            flex: 1;
            position: relative;
            display: flex;
            align-items: center;
            .#{$idutyInput}_placeholder {
                @include wh100();
                color: #999;
                pointer-events: none;
                font-size: $fs;
                display: flex;
                align-items: center;
                justify-content: end;
            }
            input,
            textarea {
                flex: 1;
                line-height: $lh;
                display: block;
                width: 100%;
                font-size: $fs;
                border: none;
                outline: none;
                color: #333;
                text-align: right;
            }
            input {
                height: $lh;
            }
            .#{$idutyInput}_input {
                flex: 1;
                display: flex;
                align-items: center;
                input {
                    flex: 1;
                }
            }
        }

        .that_clear {
            margin-left: 5px;
        }
    }

    // 垂直风格
    &.vertical {
        .that_label {
            font-weight: 600;
            font-size: px2rem(16);
            line-height: px2rem(30);
            color: #222;
        }
    
        .#{$idutyInput}_text {
            position: relative;
            .#{$idutyInput}_placeholder {
                position: absolute;
                left: 0;
                top: 0;
                color: #999;
                pointer-events: none;
                line-height: $lh;
                font-size: $fs;
            }
            input,
            textarea {
                line-height: $lh;
                display: block;
                width: 100%;
                font-size: $fs;
                border: none;
                outline: none;
                color: #333;
            }
            input {
                height: $lh;
            }
            .#{$idutyInput}_input {
                display: flex;
                align-items: center;
                input {
                    flex: 1;
                }
            }
        }
        .that_limit {
            color: #999;
            line-height: $lh;
        }
        .that_other {
            display: flex;
            align-items: center;
    
            &>div {
                &:nth-child(1) {
                    flex: 1;
                }
            }
    
            .that_clear {
                margin-left: px2rem(10);
            }
        }
    }
}