<?php
$default_settings = [
    'square_color' => '',
    'line_color' => '',
];
$settings = array_merge($default_settings, $settings);
extract($settings); 
$html_id = ct_get_element_id($settings);
?>
<div id="<?php echo esc_attr($html_id); ?>" class="ct-square-animate el-move-parents">
    <?php if(!empty($square_color) || !empty($line_color)) : ?>
        <div class="ct-inline-css"  data-css="
            #<?php echo esc_attr($html_id) ?>.ct-square-animate .ct-square-item {
                background-color: <?php echo esc_attr($line_color); ?>;
            }
            #<?php echo esc_attr($html_id) ?>.ct-square-animate .ct-square-item span {
                background: <?php echo esc_attr($square_color); ?>;
            }">
        </div>
    <?php endif; ?>
    <div class="ct-square-container">
        <div class="ct-square-item">
        	<span></span>
        </div>
        <div class="ct-square-item">
        	<span></span>
        </div>
        <div class="ct-square-item">
        	<span></span>
        </div>
        <div class="ct-square-item">
        	<span></span>
        </div>
        <div class="ct-square-item">
        	<span></span>
        </div>
        <div class="ct-square-item">
        	<span></span>
        </div>
    </div>
</div>