.word-picker {
    padding: 28rpx;
    background-color: #ffffff;

    .word-picker-title {
        font-size: 32rpx;
        color: #141414;
        font-weight: bold;
        text-align: center;
        margin-bottom: 28rpx;
    }

    .nav-class {
        // background-color: red;
        // width: 890rpx;
    }

    .tab-class {
        // width: 220rpx;
        // flex-basis: auto !important;
        // display: inline-block;
    }

    .tab-active-class {
        color: #93d333;
    }

    .wrap-class {
        margin-bottom: 28rpx;
        // background-color: blue;
    }

    .word-list-wrapper {
        padding: 28rpx 0;
        overflow-y: auto;
        height: 500rpx;

        .word-list {
            display: grid;
            grid-template-columns: repeat(7, 72rpx);
            grid-template-rows: repeat(20, 72rpx);
            gap: 24rpx;
            justify-content: center;
            // box-shadow: 0 0 -10rpx rgba(0, 0, 0, 0.2);
            // align-items: flex-start;

            .word-item {
                width: 72rpx;
                height: 72rpx;
                border-radius: 16rpx;
                background: rgba(240, 240, 240, 1);
                box-shadow: 3.9px 3.9px 5.2px rgba(0, 0, 0, 0.15);
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 28rpx;
                color: #141414;
            }
        }

        .word-item-empty {
            height: 28rpx;
            width: 100%;
        }
    }


    .selected-words {
        padding: 28rpx;
        font-size: 28rpx;
        color: #141414;

        .selected-words-text {
            font-weight: bold;
            color: #93d333;
        }
    }

}