// Two Factor Authentication CSS
.masteriyo {
    .masteriyo-login-otp {
        &--wrapper {
            box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
            border-radius: 6px;
            border: 0;
            margin: 0 auto;
            background: #ffffff;

            @media (max-width: 500px) {
                padding: 32px;
            }

            .masteriyo-notify-message {
                margin-bottom: 20px;
            }

            .masteriyo-login-otp-form {
                display: flex;
                flex-direction: column;
                gap: 20px;

                input {
                    &[type="text"] {
                        padding: 12px 16px;
                        border-radius: 3px;

                        &:focus {
                            box-shadow: none;
                            outline: none;
                            border: 1px solid #4584FF;
                        }
                    }
                }

                .masteriyo-button-container {
                    display: flex;
                    align-items: center;
                    flex-direction: row-reverse;
                    justify-content: center;
                    gap: 12px;

                    @media (max-width: 500px) {
                        flex-direction: column;
                        gap: 8px;
                    }

                    .masteriyo-btn-otp-login-resend {
                        background: #3a3a3a;

                        &:hover {
                            background: #444444;
                        }

                        &:disabled {
                            opacity: .45;
                            cursor: not-allowed;
                        }
                    }
                }
            }

            .masteriyo-danger-msg {
                margin: 0;
                margin-top: 20px;
            }

            .masteriyo-resend-counter {
                display: block;
                text-align: center;
                margin-top: 8px;
                color: #565656;
            }
        }
    }

    // Default Theme Compatibility
    &.theme {
        // Twenty Twenty One Theme
        &-twentytwentyone {
            .masteriyo-login-otp {
                &--wrapper {
                    .masteriyo-login-otp-form {
                        input[type="text"] {
                            border-width: 1px;
                        }

                        .masteriyo-button-container {
                            .masteriyo-btn-otp-login {
                                background-color: var(--masteriyo-color-primary);
                                color: var(--masteriyo-color-white);

                                &:hover {
                                    background-color: var(--masteriyo-color-btn-blue-hover);
                                }

                                &-resend {
                                    color: var(--masteriyo-color-white);

                                    &:hover {
                                        border-color: #444444;
                                    }

                                    &:disabled {
                                        border-color: #3a3a3a;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }

        // Twenty Twenty Two Theme
        &-twentytwentytwo {
            .masteriyo-login-otp {
                &--wrapper {
                    .masteriyo-login-otp-form {
                        input[type="text"] {
                            border: 1px solid var(--wp--preset--color--cyan-bluish-gray);
                        }

                        .masteriyo-button-container {
                            .masteriyo-btn-otp-login {
                                background-color: var(--masteriyo-color-primary);
                                border: 1px solid var(--masteriyo-color-primary);
                                color: var(--masteriyo-color-white);
                                cursor: pointer;

                                &:hover {
                                    background-color: var(--masteriyo-color-btn-blue-hover);
                                    border-color: var(--masteriyo-color-btn-blue-hover);
                                }

                                &-resend {
                                    color: var(--masteriyo-color-white);
                                    cursor: pointer;
                                    border: 1px solid #444444;

                                    &:hover {
                                        border-color: #444444;
                                    }

                                    &:disabled {
                                        border-color: #3a3a3a;
                                        cursor: not-allowed;
                                    }
                                }
                            }
                        }
                    }
                }

                &--title {
                    margin-top: 0;
                    margin-bottom: 20px;
                }
            }
        }

        // Twenty Twenty Three Theme
        &-twentytwentythree {
            .masteriyo-login-otp {
                &--wrapper {
                    .masteriyo-login-otp-form {
                        input[type="text"] {
                            border: 1px solid var(--wp--preset--color--cyan-bluish-gray);
                        }

                        .masteriyo-button-container {
                            .masteriyo-btn-otp-login {
                                background-color: var(--masteriyo-color-primary);
                                border: 1px solid var(--masteriyo-color-primary);
                                color: var(--masteriyo-color-white);
                                cursor: pointer;

                                &:hover {
                                    background-color: var(--masteriyo-color-btn-blue-hover);
                                    border-color: var(--masteriyo-color-btn-blue-hover);
                                }

                                &-resend {
                                    color: var(--masteriyo-color-white);
                                    cursor: pointer;
                                    border: 1px solid #444444;

                                    &:hover {
                                        border-color: #444444;
                                    }

                                    &:disabled {
                                        border-color: #3a3a3a;
                                        cursor: not-allowed;
                                    }
                                }
                            }
                        }
                    }
                }

                &--title {
                    margin-top: 0;
                    margin-bottom: 20px;
                }
            }
        }
    }
}