<?php
/**
 * VMPFence Blocking Options View
 *
 * @package VMPFence
 * @since 2.1.0
 * @since 2.2.0 - Country Blocking Options Page
 */

// Prevent direct access
if (!defined('ABSPATH')) {
    exit;
}

// Enqueue admin styles
wp_enqueue_style('vmpfence-admin', VMPFENCE_PLUGIN_URL . 'admin/assets/css/admin.css', array(), VMPFENCE_VERSION);

// Enqueue toast notifications CSS and JS (required dependency)
wp_enqueue_style('vmpfence-toast-notifications', VMPFENCE_PLUGIN_URL . 'admin/assets/css/toast-notifications.css', array(), VMPFENCE_VERSION);
wp_enqueue_script('vmpfence-toast-notifications', VMPFENCE_PLUGIN_URL . 'admin/assets/js/toast-notifications.js', array('jquery'), VMPFENCE_VERSION, true);

// Localize ajaxurl and nonce for JavaScript (security critical!)
wp_localize_script('vmpfence-toast-notifications', 'vmpfenceBlockingOptions', array(
    'ajaxurl' => admin_url('admin-ajax.php'),
    'nonce' => wp_create_nonce('vmpfence_blocking_options_nonce')
));

// Get license tier
$license_tier = VMPFence_License::get_license_type();
$is_premium = ($license_tier === 'premium');
?>

<!-- WordPress Admin Notices Container (must be in .wrap for WordPress notices to display correctly) -->
<div class="wrap">
    <?php settings_errors(); ?>
</div>

<div class="vmpfence-blocking-options-page">
    <!-- Back Link -->
    <div class="vmpfence-back-link">
        <a href="<?php echo esc_url(admin_url('admin.php?page=vmpfence-firewall&tab=blocking')); ?>" class="vmpfence-back-button">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#191970" stroke-width="2">
                <polyline points="15 18 9 12 15 6"></polyline>
            </svg>
            <span>Back to Blocking</span>
        </a>
    </div>

    <!-- Page Header with Action Buttons -->
    <div class="vmpfence-page-header">
        <div class="vmpfence-page-header-left">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#191970" stroke-width="2" class="vmpfence-page-icon">
                <circle cx="12" cy="12" r="3"></circle>
                <path d="M12 1v6m0 6v6m0-18l-2.5 2.5M12 1l2.5 2.5M12 23l-2.5-2.5M12 23l2.5-2.5M1 12h6m6 0h6M1 12l2.5 2.5M1 12l2.5-2.5M23 12l-2.5 2.5M23 12l-2.5-2.5"></path>
            </svg>
            <h1>Blocking Options</h1>
        </div>
        <div class="vmpfence-page-header-right">
            <a href="#" class="vmpfence-learn-more-link">Learn more about Blocking 
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="vertical-align: middle;">
                    <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
                    <polyline points="15 3 21 3 21 9"></polyline>
                    <line x1="10" y1="14" x2="21" y2="3"></line>
                </svg>
            </a>
        </div>
    </div>

    <!-- Action Buttons -->
    <div class="vmpfence-settings-actions">
        <button type="button" class="vmpfence-btn-restore">RESTORE DEFAULTS</button>
        <button type="button" class="vmpfence-btn-cancel-settings">CANCEL CHANGES</button>
        <button type="button" class="vmpfence-btn-save-settings">SAVE CHANGES</button>
    </div>

    <!-- Settings Form -->
    <form method="post" class="vmpfence-settings-form">
        <?php wp_nonce_field('vmpfence_blocking_options_nonce', 'vmpfence_blocking_options_nonce'); ?>
        
        <!-- General Section -->
        <div class="vmpfence-settings-section">
            <h2 class="vmpfence-settings-section-title">General</h2>
            
            <table class="vmpfence-settings-table">
                <tr>
                    <td class="vmpfence-settings-table-label">
                        Display Blocking menu option
                    </td>
                    <td class="vmpfence-settings-table-field">
                        <label class="vmpfence-checkbox-inline">
                            <input type="checkbox" name="blocking_menu_display" id="blocking_menu_display">
                            <span class="vmpfence-checkbox-box"></span>
                            <span>Enable this option to display the Blocking menu in the admin sidebar</span>
                        </label>
                    </td>
                </tr>
            </table>
        </div>

        <!-- Advanced Country Blocking Options Section -->
        <div class="vmpfence-settings-section">
            <h2 class="vmpfence-settings-section-title">Advanced Country Blocking Options</h2>
            
            <table class="vmpfence-settings-table">
                <tr>
                    <td class="vmpfence-settings-table-label">
                        What to do when we block someone
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#646970" stroke-width="2" class="vmpfence-help-icon">
                            <circle cx="12" cy="12" r="10"></circle>
                            <line x1="12" y1="16" x2="12" y2="12"></line>
                            <line x1="12" y1="8" x2="12.01" y2="8"></line>
                        </svg>
                    </td>
                    <td class="vmpfence-settings-table-field">
                        <select name="country_block_action" id="country_block_action" class="vmpfence-select-field">
                            <option value="message">Show the standard VMP blocked message</option>
                            <option value="redirect">Redirect to custom URL</option>
                        </select>
                        <p class="vmpfence-field-description">Configure how blocked users are handled when accessing your site from a blocked country</p>
                    </td>
                </tr>

                <tr>
                    <td class="vmpfence-settings-table-label">
                        URL to redirect blocked users to
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#646970" stroke-width="2" class="vmpfence-help-icon">
                            <circle cx="12" cy="12" r="10"></circle>
                            <line x1="12" y1="16" x2="12" y2="12"></line>
                            <line x1="12" y1="8" x2="12.01" y2="8"></line>
                        </svg>
                    </td>
                    <td class="vmpfence-settings-table-field">
                        <input type="text" name="country_redirect_url" id="country_redirect_url" class="vmpfence-text-input" placeholder="e.g., http://example.com/blocked/">
                        <p class="vmpfence-field-description">Enter a full URL (e.g., http://example.com/blocked/) to redirect blocked users</p>
                    </td>
                </tr>

                <tr>
                    <td class="vmpfence-settings-table-label">
                        Block countries even if they are logged in
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#646970" stroke-width="2" class="vmpfence-help-icon">
                            <circle cx="12" cy="12" r="10"></circle>
                            <line x1="12" y1="16" x2="12" y2="12"></line>
                            <line x1="12" y1="8" x2="12.01" y2="8"></line>
                        </svg>
                    </td>
                    <td class="vmpfence-settings-table-field">
                        <label class="vmpfence-checkbox-inline">
                            <input type="checkbox" name="country_block_logged_in" id="country_block_logged_in">
                            <span class="vmpfence-checkbox-box"></span>
                            <span>Block access even for authenticated users from blocked countries</span>
                        </label>
                    </td>
                </tr>

                <tr>
                    <td class="vmpfence-settings-table-label">
                        Bypass Redirect
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#646970" stroke-width="2" class="vmpfence-help-icon">
                            <circle cx="12" cy="12" r="10"></circle>
                            <line x1="12" y1="16" x2="12" y2="12"></line>
                            <line x1="12" y1="8" x2="12.01" y2="8"></line>
                        </svg>
                    </td>
                    <td class="vmpfence-settings-table-field">
                        <div class="vmpfence-bypass-section">
                            <p class="vmpfence-bypass-text">If user visits with GET parameter named 
                                <input type="text" name="country_bypass_field" id="country_bypass_field" class="vmpfence-inline-input" placeholder="bypass_key">
                            </p>
                            <p class="vmpfence-bypass-text">having the value 
                                <input type="text" name="country_bypass_value" id="country_bypass_value" class="vmpfence-inline-input" placeholder="secret123">
                            </p>
                            <p class="vmpfence-field-description">then a cookie will be set that bypasses country blocking for 30 days. Example: https://example.com/?bypass_key=secret123</p>
                        </div>
                    </td>
                </tr>

                <tr>
                    <td class="vmpfence-settings-table-label">
                        Bypass Cookie
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#646970" stroke-width="2" class="vmpfence-help-icon">
                            <circle cx="12" cy="12" r="10"></circle>
                            <line x1="12" y1="16" x2="12" y2="12"></line>
                            <line x1="12" y1="8" x2="12.01" y2="8"></line>
                        </svg>
                    </td>
                    <td class="vmpfence-settings-table-field">
                        <div class="vmpfence-bypass-section">
                            <p class="vmpfence-field-description">Cookie value to check for bypass (leave empty for auto-generated)</p>
                            <input type="text" name="country_bypass_cookie" id="country_bypass_cookie" class="vmpfence-text-input" placeholder="auto-generated">
                            <p class="vmpfence-field-description">This cookie value will be set when bypass conditions are met and checked on future visits.</p>
                        </div>
                    </td>
                </tr>
            </table>
        </div>
    </form>
</div>

<script>
jQuery(document).ready(function($) {
    // Initialize toast notification system
    if (typeof VMPFenceNotifications !== 'undefined') {
        VMPFenceNotifications.init();
    }
    
    // Load current settings on page load
    loadBlockingOptions();
    
    // Save button click handler
    $('.vmpfence-btn-save-settings').on('click', function(e) {
        e.preventDefault();
        saveBlockingOptions();
    });
    
    // Reset button click handler
    $('.vmpfence-btn-restore').on('click', function(e) {
        e.preventDefault();
        if (typeof VMPFenceNotifications !== 'undefined') {
            VMPFenceNotifications.showConfirmModal({
                title: 'Restore Defaults',
                message: 'Are you sure you want to reset all blocking options to defaults? This cannot be undone.',
                confirmText: 'Reset to Defaults',
                cancelText: 'Cancel',
                type: 'warning'
            }).then(function(confirmed) {
                if (confirmed) {
                    resetBlockingOptions();
                }
            });
        } else {
            if (confirm('Are you sure you want to reset all blocking options to defaults? This cannot be undone.')) {
                resetBlockingOptions();
            }
        }
    });
    
    // Cancel button click handler
    $('.vmpfence-btn-cancel-settings').on('click', function(e) {
        e.preventDefault();
        loadBlockingOptions();
        if (typeof VMPFenceNotifications !== 'undefined') {
            VMPFenceNotifications.showInfo('Changes discarded', 2000);
        }
    });
    
    // Show/hide redirect URL field based on action selection
    $('#country_block_action').on('change', function() {
        var redirectRow = $(this).closest('tr').next('tr');
        if ($(this).val() === 'redirect') {
            redirectRow.show();
        } else {
            redirectRow.hide();
        }
    }).trigger('change');
});

function loadBlockingOptions() {
    // Defensive check: ensure vmpfenceBlockingOptions is defined
    if (typeof vmpfenceBlockingOptions === 'undefined') {
        console.error('VMPFence: vmpfenceBlockingOptions is not defined. Script load order issue.');
        if (typeof VMPFenceNotifications !== 'undefined') {
            VMPFenceNotifications.showError('Configuration error. Please refresh the page.', 5000);
        }
        return;
    }
    
    jQuery.post(vmpfenceBlockingOptions.ajaxurl, {
        action: 'vmpfence_load_blocking_options',
        nonce: vmpfenceBlockingOptions.nonce
    }, function(response) {
        if (response.success) {
            var data = response.data;
            
            // Set form values
            jQuery('#blocking_menu_display').prop('checked', data.blocking_menu_display == 1);
            jQuery('#country_block_action').val(data.country_block_action);
            jQuery('#country_redirect_url').val(data.country_redirect_url);
            jQuery('#country_block_logged_in').prop('checked', data.country_block_logged_in == 1);
            jQuery('#country_bypass_field').val(data.country_bypass_field);
            jQuery('#country_bypass_value').val(data.country_bypass_value);
            jQuery('#country_bypass_cookie').val(data.country_bypass_cookie);
            
            // Trigger change to show/hide redirect URL
            jQuery('#country_block_action').trigger('change');
        } else {
            if (typeof VMPFenceNotifications !== 'undefined') {
                VMPFenceNotifications.showError('Failed to load blocking options: ' + (response.data.message || 'Unknown error'), 5000);
            } else {
                console.error('Failed to load blocking options:', response.data.message);
            }
        }
    }).fail(function(xhr, status, error) {
        if (typeof VMPFenceNotifications !== 'undefined') {
            VMPFenceNotifications.showError('AJAX request failed. Please refresh the page and try again.', 5000);
        } else {
            console.error('AJAX request failed:', error);
        }
    });
}

function saveBlockingOptions() {
    // Defensive check: ensure vmpfenceBlockingOptions is defined
    if (typeof vmpfenceBlockingOptions === 'undefined') {
        console.error('VMPFence: vmpfenceBlockingOptions is not defined. Script load order issue.');
        if (typeof VMPFenceNotifications !== 'undefined') {
            VMPFenceNotifications.showError('Configuration error. Please refresh the page.', 5000);
        }
        return;
    }
    
    var $saveButton = jQuery('.vmpfence-btn-save-settings');
    var originalText = $saveButton.text();
    
    // Disable button and show loading state
    $saveButton.prop('disabled', true).text('Saving...');
    
    var formData = {
        action: 'vmpfence_save_blocking_options',
        nonce: vmpfenceBlockingOptions.nonce,
        blocking_menu_display: jQuery('#blocking_menu_display').is(':checked') ? 1 : 0,
        country_block_action: jQuery('#country_block_action').val(),
        country_redirect_url: jQuery('#country_redirect_url').val(),
        country_block_logged_in: jQuery('#country_block_logged_in').is(':checked') ? 1 : 0,
        country_bypass_field: jQuery('#country_bypass_field').val(),
        country_bypass_value: jQuery('#country_bypass_value').val(),
        country_bypass_cookie: jQuery('#country_bypass_cookie').val()
    };
    
    jQuery.post(vmpfenceBlockingOptions.ajaxurl, formData, function(response) {
        // Re-enable button
        $saveButton.prop('disabled', false).text(originalText);
        
        if (response.success) {
            if (typeof VMPFenceNotifications !== 'undefined') {
                VMPFenceNotifications.showSuccess('Blocking options saved successfully!', 4000);
            } else {
                alert('Blocking options saved successfully!');
            }
        } else {
            if (typeof VMPFenceNotifications !== 'undefined') {
                VMPFenceNotifications.showError('Failed to save: ' + (response.data.message || 'Unknown error'), 5000);
            } else {
                alert('Failed to save blocking options: ' + response.data.message);
            }
        }
    }).fail(function(xhr, status, error) {
        // Re-enable button
        $saveButton.prop('disabled', false).text(originalText);
        
        if (typeof VMPFenceNotifications !== 'undefined') {
            VMPFenceNotifications.showError('AJAX request failed. Please try again.', 5000);
        } else {
            alert('AJAX request failed. Please try again.');
        }
    });
}

function resetBlockingOptions() {
    // Defensive check: ensure vmpfenceBlockingOptions is defined
    if (typeof vmpfenceBlockingOptions === 'undefined') {
        console.error('VMPFence: vmpfenceBlockingOptions is not defined. Script load order issue.');
        if (typeof VMPFenceNotifications !== 'undefined') {
            VMPFenceNotifications.showError('Configuration error. Please refresh the page.', 5000);
        }
        return;
    }
    
    var $resetButton = jQuery('.vmpfence-btn-restore');
    var originalText = $resetButton.text();
    
    // Disable button and show loading state
    $resetButton.prop('disabled', true).text('Resetting...');
    
    jQuery.post(vmpfenceBlockingOptions.ajaxurl, {
        action: 'vmpfence_reset_blocking_options',
        nonce: vmpfenceBlockingOptions.nonce
    }, function(response) {
        // Re-enable button
        $resetButton.prop('disabled', false).text(originalText);
        
        if (response.success) {
            // Reload form with default values
            loadBlockingOptions();
            if (typeof VMPFenceNotifications !== 'undefined') {
                VMPFenceNotifications.showSuccess('Blocking options reset to defaults successfully!', 4000);
            } else {
                alert('Blocking options reset to defaults successfully!');
            }
        } else {
            if (typeof VMPFenceNotifications !== 'undefined') {
                VMPFenceNotifications.showError('Failed to reset: ' + (response.data.message || 'Unknown error'), 5000);
            } else {
                alert('Failed to reset blocking options: ' + response.data.message);
            }
        }
    }).fail(function(xhr, status, error) {
        // Re-enable button
        $resetButton.prop('disabled', false).text(originalText);
        
        if (typeof VMPFenceNotifications !== 'undefined') {
            VMPFenceNotifications.showError('AJAX request failed. Please try again.', 5000);
        } else {
            alert('AJAX request failed. Please try again.');
        }
    });
}
</script>

<style>
/* Blocking Options Page Styles */
.vmpfence-blocking-options-page {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    max-width: 1300px;
    padding: 20px 20px 20px 0;
}

/* Back Link */
.vmpfence-back-link {
    margin-bottom: 20px;
}

.vmpfence-back-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #191970;
    text-decoration: none;
    font-size: 14px;
    background: #f0f0f1;
}

/* Back Link */
.vmpfence-back-link {
    margin-bottom: 16px;
}

.vmpfence-back-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #191970;
    text-decoration: none;
    font-size: 14px;
    font-weight: 400;
    transition: color 0.2s ease;
}

.vmpfence-back-button:hover {
    color: #007AFF;
}

/* Page Header */
.vmpfence-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.vmpfence-page-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.vmpfence-page-header-left h1 {
    margin: 0;
    font-size: 23px;
    font-weight: 400;
    color: #1d2327;
}

.vmpfence-learn-more-link {
    color: #191970;
    text-decoration: none;
    font-size: 13px;
    transition: color 0.2s ease;
}

.vmpfence-learn-more-link:hover {
    color: #007AFF;
    text-decoration: underline;
}

/* Action Buttons */
.vmpfence-settings-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-bottom: 16px;
}

.vmpfence-btn-restore,
.vmpfence-btn-cancel-settings,
.vmpfence-btn-save-settings {
    padding: 8px 20px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.vmpfence-btn-restore,
.vmpfence-btn-cancel-settings {
    background: white;
    color: #191970;
    border: 1px solid #c3c4c7;
}

.vmpfence-btn-restore:hover:not(:disabled),
.vmpfence-btn-cancel-settings:hover:not(:disabled) {
    background: #f6f7f7;
    border-color: #191970;
    box-shadow: 0 2px 5px rgba(25,25,112,0.15);
}

.vmpfence-btn-save-settings {
    background: #191970;
    color: white;
    border: 1px solid #191970;
}

.vmpfence-btn-save-settings:hover:not(:disabled) {
    background: #007AFF;
    border-color: #007AFF;
    box-shadow: 0 2px 5px rgba(0,122,255,0.3);
}

.vmpfence-btn-restore:disabled,
.vmpfence-btn-cancel-settings:disabled,
.vmpfence-btn-save-settings:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    box-shadow: none;
}

/* Settings Sections */
.vmpfence-settings-section {
    background: white;
    border: 1px solid #e0e0e0;
    /* border-radius: 12px; */
    padding: 0;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.06);
    overflow: hidden;
}

.vmpfence-settings-section-title {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #191970;
    padding: 16px 20px;
    background: linear-gradient(135deg, #f8f9fa 0%, #f0f1f2 100%);
    border-bottom: 1px solid #e0e0e0;
}

/* Settings Table */
.vmpfence-settings-table {
    width: 100%;
    border-collapse: collapse;
}

.vmpfence-settings-table tr {
    border-bottom: 1px solid #f0f0f1;
}

.vmpfence-settings-table tr:last-child {
    border-bottom: none;
}

.vmpfence-settings-table-label {
    width: 250px;
    padding: 20px 16px;
    vertical-align: top;
    font-size: 14px;
    color: #1d2327;
    font-weight: 400;
}

.vmpfence-settings-table-field {
    padding: 20px 16px;
    vertical-align: top;
}

.vmpfence-help-icon {
    cursor: help;
    vertical-align: middle;
    margin-left: 4px;
}

/* Form Inputs */
.vmpfence-select-placeholder {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 500px;
    padding: 10px 12px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    border: 1px solid #d0d0d0;
    border-radius: 12px;
    background: #f6f7f7;
    color: #646970;
    cursor: not-allowed;
}

.vmpfence-select-placeholder span {
    flex: 1;
}

.vmpfence-select-placeholder svg {
    flex-shrink: 0;
    margin-left: 8px;
}

.vmpfence-text-input {
    width: 100%;
    max-width: 500px;
    padding: 10px 12px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    border: 1px solid #d0d0d0;
    border-radius: 12px;
    transition: all 0.2s ease;
    background: white;
}

.vmpfence-inline-input {
    width: 150px;
    padding: 8px 12px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    border: 1px solid #d0d0d0;
    border-radius: 12px;
    margin: 0 4px;
    vertical-align: baseline;
    background: white;
}

.vmpfence-text-input:focus,
.vmpfence-inline-input:focus {
    outline: none;
    border-color: #191970;
    box-shadow: 0 0 0 2px rgba(25,25,112,0.1);
}

.vmpfence-text-input:disabled,
.vmpfence-inline-input:disabled {
    background: #f6f7f7;
    color: #8c8f94;
    cursor: not-allowed;
    border-color: #e0e0e0;
}

/* Checkbox */
.vmpfence-checkbox-inline {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 14px;
    color: #2c3338;
    cursor: pointer;
}

.vmpfence-checkbox-inline input[type="checkbox"] {
    margin: 3px 0 0 0;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #191970;
}

.vmpfence-checkbox-inline input[type="checkbox"]:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.vmpfence-checkbox-inline:hover input[type="checkbox"]:not(:disabled) {
    outline: 2px solid rgba(25, 25, 112, 0.2);
    outline-offset: 2px;
}

/* Field Descriptions */
.vmpfence-field-description {
    margin: 8px 0 0 0;
    font-size: 13px;
    color: #646970;
    line-height: 1.5;
}

/* Bypass Sections */
.vmpfence-bypass-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vmpfence-bypass-text {
    margin: 0;
    font-size: 14px;
    color: #2c3338;
    line-height: 1.8;
}

/* Info Section (matching whois lookup style) */
.vmpfence-blocking-notice {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    margin-bottom: 24px;
    border-radius: 12px;
    font-size: 14px;
    font-family: 'Inter', sans-serif;
}

.vmpfence-blocking-notice-info {
    background: #F5F7FA;
    border-left: 4px solid #191970;
    color: #191970;
}

.vmpfence-blocking-notice .dashicons {
    color: #191970;
    font-size: 20px;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}
</style>