@import "../base/fn.wxss";

.wux-keyboard {
    background-color: rgba(0, 0, 0, .4);
    right: 0;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.wux-keyboard__content,
.wux-keyboard {
    position: fixed;
    z-index: 1502;
    bottom: 0;
    left: 0;
}

.wux-keyboard__content {
    width: 100%;
    transform: translateY(100%);
    transition: transform .3s;
    background-color: #f7f7f7;
}

.wux-keyboard__hd {
    height: 80rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #1f2324;
    font-size: 30rpx;
    position: relative;
    
    &:after {
        .setBottomLine(#D9D9D9)
    }
}

.wux-keyboard__bd {
    margin: 30rpx 80rpx;
    display: flex;
    position: relative;
    background-color: #fff;
}

.wux-keyboard__label {
    flex: 1;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100rpx;
    
    &:not(:last-child):after {
        content: "";
        width: 2rpx;
        height: 50%;
        position: absolute;
        right: 0;
        top: 25%;
        background-color: #d9d9d9;
        transform: scaleX(.5);
    }
}

.wux-keyboard__password {
    width: 12rpx;
    height: 12rpx;
    border-radius: 50%;
    background-color: #000;
    display: none;
}

.wux-keyboard__password--active {
    display: block;
}

.wux-keyboard__ft {
    background-color: #fff;
    position: relative;
    
    &:before {
        .setTopLine(#D9D9D9)
    }
}

.wux-keyboard__title {
    overflow: hidden;
    padding: 20rpx 0 12rpx;
    color: #222;
    margin-bottom: 1px;
    font-size: 24rpx;
    text-align: center;
    background-color: #fff;
    
    &:before {
        font-size: 26rpx;
        color: #ff2424;
        line-height: 1;
        margin-right: 6rpx;
    }
}

.wux-keyboard__numbers {
    font-size: 48rpx;
    background-color: #fff;
}

.wux-keyboard__number {
    display: flex;
    width: 100%;
}

.wux-keyboard__text {
    display: flex;
    width: 1%;
    flex: 1;
    color: #222;
    height: 100rpx;
    position: relative;
    justify-content: center;
    align-items: center;
    overflow: hidden;

    &:before {
        .setTopLine(#D9D9D9)
    }


    &:not(:last-child):after {
        .setRightLine(#D9D9D9)
    }
}

.wux-keyboard__text--hover {
    background-color: #dedede;
    color: rgba(0, 0, 0, .6);
}

.wux-keyboard__number:last-child .wux-keyboard__text:last-child,
.wux-keyboard__number:last-child .wux-keyboard__text:nth-last-child(3) {
    background-color: #f7f7f7;
    font-size: 30rpx;
    color: #686868;
}