@charset "utf-8";

// Variables
@use "configs/var" as var;

// Mixins
@use "configs/mixin" as mixin;

$plugin_name: "bvisherloq";

#dashboard-widgets {
    display: none;
}

#wpfooter #footer-upgrade {
    display: none !important;
}

.#{$plugin_name}-settings-form {
    .form-table {
        td {
            font-size: 1rem;
            line-height: 2rem;

            @include mixin.bp(desktop) {
                font-size: 1rem;
                line-height: 1.4rem;
            }

            .description {
                display: block;
                font-size: 1rem;
                padding: 0 0 0.8rem;
            }

            > p {
                margin-top: -5px;
            }

            > br {
                display: none;
            }
        }

        .fields-group {
            border-bottom: 1px solid #ccc;
            margin: 0 0 1.25rem;
            padding: 0 0 1.25rem;

            &.fields-group-1 {
                span {
                    &.remove {
                        display: none;
                    }
                }
            }

            &:last-child {
                border: 0;
            }

            .field {
                padding: 0 0 0.6rem;
            }

            .#{$plugin_name}-field {
                margin: 0.8rem 0;

                input {
                    margin: 3px 0;
                }
            }
        }
    }
}

##{$plugin_name}-api-connection-status {
    padding: 1rem;

    p {
        font-size: 1.5rem;
    }

    .api-status {
        color: rgb(13, 107, 13);

        &.connected {
            display: none;

            &.is-active {
                display: block;
            }
        }

        &.connecting {
            display: none;

            &.is-active {
                display: block;
            }
        }

        &.disconnected {
            color: rgb(132, 15, 15);
            display: none;

            &.is-active {
                display: block;
            }
        }
    }
}

.#{$plugin_name}-sync-backleads-form {
    color: rgb(42, 42, 42);

    p {
        font-size: 1.1rem !important;
    }

    .sync-form {
        align-items: flex-start;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        gap: 2rem;
        justify-content: flex-start;

        .field {
            align-items: center;
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            gap: 0.5rem;
            justify-content: flex-start;
            font-size: 1rem;
            line-height: 1;
            padding: 0 0 0.75rem;

            input {
                margin: 0;
            }
        }

        ##{$plugin_name}-backleads-button {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            gap: 1rem;
            justify-content: flex-start;

            .spinner {
                display: none;

                &.is-active {
                    display: block;
                }
            }
        }
    }
}

.#{$plugin_name}-logs-table {
    pre {
        white-space: pre-wrap;
    }

    .column-time {
        width: 10%;
    }

    .column-form_id {
        width: 5%;
    }

    .column-request {
        width: 30%;
    }

    .column-response {
        width: 55%;
    }
}