@use "../constants" as *;

.settings {
    form {
        .settings-group {
            padding: 15px 25px;
            border-radius: 5px;
            background-color: #fff;
            box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
            margin-top: 1rem;

            p {
                color: $main-font-color;
                line-height: 1.6;
                font-size: 14px;
            }

            label {
                display: block;
                margin-bottom: 1rem;
                font-weight: 500;
                color: $main-font-color;
            }

            #dbg_lv_timezone {
                border: 1px solid #8c8f9436;
            }

            .form-check {
                padding-left: 0;

                .form-check-label {
                    display: flex;
                    align-items: center;
                    cursor: pointer;

                    input {
                        margin-left: 0;
                    }

                    .form-check-input:checked {
                        background-color: transparent;
                    }

                    .form-check-sign {
                        margin-right: 0.5rem;
                    }

                    span {
                        font-weight: 400;
                    }

                    .tooltip-icon {
                        margin-left: 0.5rem;
                        color: #0073aa;
                        font-size: 14px;
                        cursor: help;
                    }
                }
            }

            input[type="submit"] {
                padding: 0.5rem 1.25rem;
                color: #fff;
                font-weight: 500;
                transition: all 0.2s ease;
                display: block;

                &:disabled {
                    opacity: 0.65;
                    cursor: not-allowed;
                }
            }
        }
    }
}

@media (max-width: 768px) {
    .settings {
        padding: 1rem;
    }
}

// Bootstrap tooltip customizations
.tooltip {
    font-size: 0.85rem;

    .tooltip-inner {
        max-width: 250px;
        padding: 0.5rem 0.75rem;
        background-color: #23282d;
        border-radius: 0.25rem;
    }
}