.tab-content > .active {
            display: flex;
        }

        .ql-stroke {
            stroke: var(--phoenix-gray-900) !important;
        }

        .ql-fill {
            fill: var(--phoenix-gray-900) !important;;
        }

        .ql-snow .ql-picker {
            color: var(--phoenix-gray-900);
        }

        #pageContent {
            border-left: 0;
            border-right: 0;
        }

        #toolbar-container {
            border-bottom: 0;
            border-left: 0;
            border-right: 0;
        }

        .pages-list-container {
            li {
                padding-right: 6px;
            }

            .delete-page {
                padding: 10px;
            }
        }

        .radio-wrapper{
            margin-top: 10px;
            padding-top: 10px;
            border-top: 1px solid var(--phoenix-gray-200);
        }

        /* Base state when checkbox is unchecked */
        .checkbox-wrapper:has(> .form-check > input[type="checkbox"]:not(:checked)) > *:not(.form-check) {
            opacity: 0.5;
            pointer-events: none;
        }

        /* Special handling for radio controls - keep them enabled when checkbox is checked */
        .checkbox-wrapper:has(> .form-check > input[type="checkbox"]:checked) .radio-wrapper > .form-check-inline {
            opacity: 1;
            pointer-events: auto;
        }

        /* Handle radio wrapper content states */
        .radio-wrapper:has(> .form-check-inline > input[type="radio"]:not(:checked)) > *:not(:first-child) {
            opacity: 0.5;
            pointer-events: none;
        }

        .radio-wrapper:has(> .form-check-inline > input[type="radio"]:not(:checked)) input:not([.wrapper-control]),
        .radio-wrapper:has(> .form-check-inline > input[type="radio"]:not(:checked)) textarea,
        .radio-wrapper:has(> .form-check-inline > input[type="radio"]:not(:checked)) button {
            pointer-events: none;
        }

        /* Enable content when radio is checked */
        .radio-wrapper:has(> .form-check-inline > input[type="radio"]:checked) > * {
            opacity: 1;
            pointer-events: auto;
        }

        /* Ensure controlling radio buttons are always enabled when checkbox is checked */
        .checkbox-wrapper:has(> .form-check > input[type="checkbox"]:checked) .radio-wrapper .form-check-inline > input[.wrapper-control],
        .checkbox-wrapper:has(> .form-check > input[type="checkbox"]:checked) .radio-wrapper .form-check-inline > label {
            opacity: 1;
            pointer-events: auto;
        }
        .footer-image-container, .header-image-container{
            .image-delete{
                display: none;
            }
        }

        .footer-image-container:has(img[src]),
        .header-image-container:has(img[src]){
            .image-delete{
                display: block;
            }
        }
.page-numbers-wrapper{
            .radios {
                input[type="radio"] {
                    pointer-events: none;
                    opacity: .5;
                }
                .form-check-label{
                    pointer-events: none;
                    opacity: .5;
                }
            }
            .radios-label{
                opacity: .5;
            }

            &:has(.form-check input[type="checkbox"]:checked){
                .radios {
                    input[type="radio"] {
                        pointer-events: all;
                        opacity: 1;
                    }
                    .form-check-label{
                        pointer-events: all;
                        opacity: 1;
                    }
                }

                .radios-label{
                    opacity: 1;
                }
            }
        }
        .variables-table{
            font-size: 14px;

            mark{
                background-color: #b9ceff;
                text-wrap: nowrap;
                cursor: pointer;
            }
            td{
                text-align: left;
            }
        }
        .swal2-html-container:has(.variables-table){
            margin: 1em .6em .3em;
            max-height: 500px;

            .alert-soft-info{
                --phoenix-alert-padding-y: 0.5rem;
                --phoenix-alert-padding-x: 0.5rem;
                line-height: 16px;
            }
        }

        .styles-container{
            hr:last-of-type {
                display: none;
            }
            .style-container {
                .font-select{
                    width: 100%;
                    max-width: 200px;

                    @media only screen and (max-width: 576px) {
                        & {
                            max-width: 100%;
                        }
                    }
                }
                .font-size{
                    input{
                        width: 50px;
                        text-align: right;
                        padding-left: 5px;
                        padding-right: 5px;
                    }
                    span{
                        padding-left: 5px;
                        padding-right: 5px;
                    }
                }
                .color-selector{
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;

                    span{
                        font-size: large;
                        font-weight: 600;
                        line-height: 18px;
                    }
                    input[type="color"]{
                        height: 10px;
                        padding: 0;
                        border: none;
                        width: 31px;
                    }
                }
            }
        }