@import './var.scss';

:root {
    --keyboard-z-index: #{$keyboard-z-index};
    --keyboard-bg: #{$keyboard-bg};
    --keyboard-key-font-size: #{$keyboard-key-font-size};
    --keyboard-key-padding: #{$keyboard-key-padding};
    --keyboard-key-border-color: #{$keyboard-key-border-color};
    --keyboard-title-color: #{$keyboard-title-color};
    --keyboard-title-height: #{$keyboard-title-height};
    --keyboard-title-font-size: #{$keyboard-title-font-size};
    --keyboard-title-bg: #{$keyboard-title-bg};
    --keyboard-title-border-bottom-color: #{$keyboard-title-border-bottom-color};
    --keyboard-title-border-top-color: #{$keyboard-title-border-top-color};
    --keyboard-active-font-size: #{$keyboard-active-font-size};
    --keyboard-key-color: #{$keyboard-key-color};
    --keyboard-key-special-font-size: #{$keyboard-key-special-font-size};
    --keyboard-cursor-color: #{$keyboard-cursor-color};
    --keyboard-cursor-width: #{$keyboard-cursor-width};
    --keyboard-cursor-height: #{$keyboard-cursor-height};
    --keyboard-cursor-cursor-animation-duration: #{$keyboard-cursor-cursor-animation-duration};
}

.jing-keyboard {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: var(--keyboard-z-index);
    width: 100%;
    //   padding-bottom: 22px;
    background-color: var(--keyboard-bg);
    user-select: none;

    &__header {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: var(--keyboard-title-height);
        color: var(--keyboard-title-color);
        font-size: var(--keyboard-title-font-size);
        background-color: var(--keyboard-title-bg);
        border-bottom: 1px solid var(--keyboard-title-border-bottom-color);
        border-top: 1px solid var(--keyboard-title-border-top-color);

        &-left,
        &-right {
            height: 100%;
        }

        &-title,
        &-right {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        &-title {
            .jing-icon {
                margin-right: var(--padding-xs);
            }
        }
        &-right {
            transform: rotate(90deg);
        }
    }

    &__body {
        display: flex;
        padding: 4px 0 0 4px;
        height: 100%;
    }

    &__keys {
        display: flex;
        flex-wrap: wrap;
        &-row {
            display: flex;
            flex-wrap: wrap;
            width: 100%;
        }
    }
}

.jing-keyboard-key {
    display: flex;
    align-items: baseline;
    justify-content: center;
    height: 100%;
    font-size: var(--keyboard-key-font-size);
    line-height: 1.5;
    background-color: var(--color-white-1);
    border-radius: var(--border-radius-md);
    cursor: pointer;
    padding: var(--keyboard-key-padding) 0;
    border-bottom: 1px solid var(--keyboard-key-border-color);

    &__wrapper {
        position: relative;
        flex: 0 0 10%;
        padding: 0 var(--keyboard-key-padding) var(--keyboard-key-padding) 0;
        // height: 25%;
        &-active {
            .jing-keyboard-key {
                position: absolute;
                left: 0;
                right: 0;
                top: auto;
                width: 100%;
                height: 100%;
                font-size: var(--keyboard-active-font-size);
                z-index: 2;
                bottom: 125%;
                border: 0;
                background: 0 0;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            &:after {
                z-index: var(--keyboard-z-index);
                display: block;
                content: '';
                width: 230%;
                height: 230%;
                position: absolute;
                z-index: 1;
                bottom: 4%;
                left: 50%;
                transform: translateX(-50%);
                background: url('../../../assets/keyboard-active.png') center center
                    no-repeat;
                background-size: auto 100%;
            }
            &:nth-child(1) {
                .jing-keyboard-key {
                    left: 37.5% !important;
                }
                &:after {
                    background-position: left center !important;
                    left: -3% !important;
                    transform: translateX(0) !important;
                }
            }
            &:nth-child(10) {
                .jing-keyboard-key {
                    left: auto !important;
                    right: 37.5% !important;
                }
                &:after {
                    background-position: right center !important;
                    left: auto !important;
                    right: -3% !important;
                    transform: translateX(0) !important;
                }
            }
        }
        &-delete-active {
            .jing-keyboard-key {
                background-color: var(--color-white-1) !important;
            }
        }
        &-special-active {
            &:nth-child(28) {
                .jing-keyboard-key {
                    background-color: var(--color-white-1);
                }
            }
            &:nth-child(29) {
                .jing-keyboard-key {
                    background-color: var(--color-white-1);
                    color: var(--color-black-1);
                }
            }
            &:nth-child(30) {
                .jing-keyboard-key {
                    background-color: var(--keyboard-key-color);
                    color: var(--color-white-1);
                }
            }
        }
    }

    &__shift-icon {
        width: 24px;
        height: 24px;
    }

    &__delete-icon {
        width: 22px;
        height: 22px;
    }

    &__collapse-icon {
        width: 30px;
        height: 24px;
    }
}

// letter
.jing-keyboard__layout {
    &-default,
    &-shift {
        .jing-keyboard__keys-row {
            &:nth-child(2) {
                .jing-keyboard-key__wrapper {
                    &:nth-child(1) {
                        margin-left: 5%;
                    }
                }
            }
            &:nth-child(3) {
                .jing-keyboard-key__wrapper {
                    &:nth-child(1) {
                        flex: 0 0 13%;
                        margin-right: 2%;
                        .jing-keyboard-key {
                            background-color: var(--keyboard-key-color);
                            color: var(--color-white-1);
                            font-size: var(--keyboard-key-special-font-size);
                            align-items: center;
                        }
                    }
                    &:nth-child(9) {
                        flex: 0 0 13%;
                        margin-right: 0;
                        margin-left: 2%;
                        .jing-keyboard-key {
                            background-color: var(--keyboard-key-color);
                            color: var(--color-white-1);
                            font-size: var(--keyboard-key-special-font-size);
                            align-items: center;
                        }
                    }
                }
            }
            &:nth-child(4) {
                .jing-keyboard-key__wrapper {
                    &:nth-child(1) {
                        flex: 0 0 25%;
                        .jing-keyboard-key {
                            background-color: var(--keyboard-key-color);
                            color: var(--color-white-1);
                            font-size: var(--keyboard-key-special-font-size);
                            align-items: center;
                        }
                    }
                    &:nth-child(2) {
                        flex: 0 0 50%;
                        .jing-keyboard-key {
                            font-size: var(--keyboard-key-special-font-size);
                            align-items: center;
                        }
                    }
                    &:nth-child(3) {
                        flex: 0 0 25%;
                        .jing-keyboard-key {
                            background-color: var(--keyboard-key-color);
                            color: var(--color-white-1);
                            font-size: var(--keyboard-key-special-font-size);
                            align-items: center;
                        }
                    }
                }
            }
        }
    }
    &-shift {
        .jing-keyboard__keys-row {
            &:nth-child(3) {
                .jing-keyboard-key__wrapper {
                    &:nth-child(1) {
                        .jing-keyboard-key {
                            background-color: var(--color-white-1);
                            color: var(--color-white-1);
                        }
                    }
                }
            }
        }
    }
    &-symbol {
        .jing-keyboard__keys-row {
            &:nth-child(2) {
                .jing-keyboard-key__wrapper {
                    &:nth-child(1) {
                        margin-left: 5%;
                    }
                }
            }
            &:nth-child(3) {
                .jing-keyboard-key__wrapper {
                    &:nth-child(1) {
                        margin-left: 5%;
                    }
                    &:nth-child(9) {
                        flex: 0 0 13%;
                        margin-right: 0;
                        margin-left: 2%;
                        .jing-keyboard-key {
                            background-color: var(--keyboard-key-color);
                            color: var(--color-white-1);
                            font-size: var(--keyboard-key-special-font-size);
                            align-items: center;
                        }
                    }
                }
            }
            &:nth-child(4) {
                .jing-keyboard-key__wrapper {
                    &:nth-child(1) {
                        flex: 0 0 25%;
                        .jing-keyboard-key {
                            background-color: var(--keyboard-key-color);
                            color: var(--color-white-1);
                            font-size: var(--keyboard-key-special-font-size);
                            align-items: center;
                        }
                    }
                    &:nth-child(7) {
                        flex: 0 0 25%;
                        .jing-keyboard-key {
                            background-color: var(--keyboard-key-color);
                            color: var(--color-white-1);
                            font-size: var(--keyboard-key-special-font-size);
                            align-items: center;
                        }
                    }
                }
            }
        }
    }
}

// .jing-keyboard__layout-letter {
//   .jing-keyboard-key__wrapper {
//     flex: 0 0 10%;
//   }
// }
.jing-keyboard__layout-custom-number,
.jing-keyboard__layout-number,
.jing-keyboard__layout-price,
.jing-keyboard__layout-id {
    width: 100%;
    .jing-keyboard__keys {
        width: 100%;
        .jing-keyboard-key__wrapper {
            flex: 0 0 33%;
            &-active {
                .jing-keyboard-key {
                    background-color: var(--keyboard-key-color) !important;
                    color: #fff;
                    position: static;
                    font-size: var(--keyboard-key-font-size);
                    align-items: baseline;
                }
                &:after {
                    display: none;
                    //   z-index: 100;
                    //   display: block;
                    //   content: '';
                    //   width: 230%;
                    //   height: 230%;
                    //   position: absolute;
                    //   z-index: 1;
                    //   bottom: 4%;
                    //   left: 50%;
                    //   transform: translateX(-50%);
                    //   background: url('~@/assets/keyboard-active.png') center center
                    //     no-repeat;
                    //   background-size: auto 100%;
                }
            }
            &:nth-child(12) {
                .jing-keyboard-key {
                    align-items: center;
                }
            }
        }
    }
}

.jing-keyboard__layout-number {
    .jing-keyboard-key__wrapper {
        &:nth-child(10) {
            .jing-keyboard-key {
                background-color: transparent;
                border-bottom: 0;
            }
        }
    }
}

// jing-keyboard jing-keyboard__layout-shift jing-keyboard__layout-custom-letter
.jing-keyboard__layout-custom-letter {
    .jing-keyboard-key__wrapper {
        flex: 1;
    }
}