<!-- Activate & Sign -->

document.addEventListener('DOMContentLoaded', function() {
    const buttonThemes = document.querySelectorAll('[data-ui-button-theme]');
    const buttonGroups = document.querySelectorAll('[data-ui-button-group]');

    function updateVisibility() {
        buttonThemes.forEach(theme => {
            const button = theme.querySelector('[data-ui-button]');
            if (button) {
                const computedStyle = window.getComputedStyle(button);
                const backgroundColor = computedStyle.backgroundColor;
                const isTransparent = backgroundColor === 'rgba(0, 0, 0, 0)' || backgroundColor === 'transparent';
                const buttonStyle = button.getAttribute('data-ui-button-style');
                
                if (isTransparent && buttonStyle === 'outline') {
                    theme.style.display = 'none';
                } else {
                    theme.style.display = isTransparent ? 'none' : '';
                }
            }
        });

        buttonGroups.forEach(group => {
            const visibleThemes = group.querySelectorAll('[data-ui-button-theme]:not([style*="display: none"])');
            group.style.display = visibleThemes.length === 0 ? 'none' : '';
        });

        const groupTypes = ['primary', 'secondary', 'tertiary', 'accent', 'base', 'neutral'];
        
        groupTypes.forEach(type => {
            const group = document.querySelector(`[data-ui-button-group="${type}" i]`);
            if (group) {
                const optionBtnOutline = getComputedStyle(document.documentElement).getPropertyValue(`--option-${type}-btn-outline`).trim();

                if (optionBtnOutline !== 'on') {
                    const outlineButtons = group.querySelectorAll('[data-ui-button-style="outline"]');
                    outlineButtons.forEach(button => {
                        button.style.display = 'none';
                    });
                } else {
                    const outlineButtons = group.querySelectorAll('[data-ui-button-style="outline"]');
                    outlineButtons.forEach(button => {
                        button.style.display = '';
                    });
                }
            }
        });
    }

    const resizeObserver = new ResizeObserver(updateVisibility);
    buttonThemes.forEach(theme => resizeObserver.observe(theme));

    updateVisibility(); // Initial update
});

<!-- Activate & Sign -->

function observeElementProperty(elementSelector, labelSelector, propertyName) {
    const element = document.querySelector(elementSelector);
    const label = document.querySelector(labelSelector);

    if (!element || !label) return;

    const updateLabel = () => {
        const computedStyle = window.getComputedStyle(element);
        const value = computedStyle[propertyName];
        const numericValue = parseFloat(value);
        if (!isNaN(numericValue)) {
            const roundedValue = numericValue.toFixed(2);
            const displayValue = roundedValue.endsWith('.00') ? Math.floor(numericValue) : roundedValue;
            const existingText = label.textContent.split('-')[0].trim();
            label.textContent = `${existingText} - ${displayValue}px`;
        }
    };

    const resizeObserver = new ResizeObserver(updateLabel);
    resizeObserver.observe(element);

    updateLabel(); // Initial measurement
}

document.addEventListener('DOMContentLoaded', function() {
    observeElementProperty('[data-ui-content-width]', '[data-ui-content-width-label]', 'width');
    observeElementProperty('[data-ui-grid-gap]', '[data-ui-grid-gap-label]', 'gap');
    observeElementProperty('[data-ui-card-gap]', '[data-ui-card-gap-label]', 'gap');
    observeElementProperty('[data-ui-content-gap]', '[data-ui-content-gap-label]', 'gap');
    observeElementProperty('[data-ui-section-padding]', '[data-ui-section-padding-label]', 'paddingTop');
  observeElementProperty('[data-ui-container-gap]', '[data-ui-container-gap-label]', 'gap');
});