<?php
/* COMMENT
------------------------------------------------------------------------ */
$params[ 'comment_content_typography' ] = array(
    'type' => 'typography',
    'title' => 'Comment typography',
    'selector' => '{{WRAPPER}} .comment-content',
    
    'section' => 'comment',
    'section_title' => 'Comment',
);

$params[ 'comment_author_typography' ] = array(
    'type' => 'typography',
    'title' => 'Comment author typography',
    'selector' => '{{WRAPPER}} .commentlist .fn',
);

$params[ 'comment_meta_typography' ] = array(
    'type' => 'typography',
    'title' => 'Comment meta typography',
    'selector' => '{{WRAPPER}} .comment-metadata a',
);

$params[ 'comment_avatar_size' ] = array(
    'type' => 'size',
    'title' => 'Comment avatar size',
    'selectors' => [
        '{{WRAPPER}} .commentlist .comment-author img' => 'width:{{SIZE}}{{UNIT}};'
    ],
    
    'px_min' => 20,
    'px_max' => 100,
    
    'std_unit' => 'px',
    'std_size' => 56,
);

$params[ 'h_heading' ] = array(
    'type' => 'heading',
    'title' => 'Heading',
);

$params[ 'comment_heading_typography' ] = array(
    'type' => 'typography',
    'title' => 'Heading typography',
    'selector' => '{{WRAPPER}} #reply-title, {{WRAPPER}} .comments-title',
);

/* INPUT
------------------------------------------------------------------------ */
$text_types = [
    'text', 'email', 'password', 'search', 'number', 'date', 'tel', 'url',
];
$input = [];
$input_focus = [];
foreach ( $text_types as $text_type ) {
    $input[] = '{{WRAPPER}} input[type="' . $text_type . '"]';
    $input_focus[] = '{{WRAPPER}} input[type="' . $text_type . '"]:focus';
}

$input_withoutarea = join( ',', $input );
$input = $input_withoutarea . ',{{WRAPPER}} textarea';
$input_focus = join( ',', $input_focus );

$button = '{{WRAPPER}} #respond #submit';
$button_hover = '{{WRAPPER}} #respond #submit:hover';

$params[ 'input_typography' ] = array(
    'type' => 'typography',
    'title' => 'Input typography',
    'selector' => $input,
    
    // style
    'section' => 'input',
    'section_title' => 'Input Style',
    'section_tab' => 'style',
);

$params[ 'input_height' ] = array(
    'type' => 'size',
    'title' => 'Input height',
    
    'px_min' => 10,
    'px_max' => 100,
    
    'std_unit' => 'px',
    'std_size' => 40,
    
    'selectors' => [
        $input_withoutarea => 'height: {{SIZE}}{{UNIT}};'
    ],
);

$params[ 'input_color' ] = array(
    'type' => 'color',
    'title' => 'Input text color',
    'selectors' => [
        $input => 'color: {{VALUE}};',
    ],
    
    // tab
    'tab' => 'input_normal',
    'tab_title' => 'Normal',
    'tabs'     => 'input',
);

$params[ 'input_bg' ] = array(
    'type' => 'color',
    'title' => 'Input background color',
    'selectors' => [
        $input => 'background-color: {{VALUE}};',
    ],
);

$params[ 'input_border_color' ] = array(
    'type' => 'color',
    'title' => 'Input border color',
    'selectors' => [
        $input => 'border-color: {{VALUE}};',
    ],
);

$params[ 'input_border_width' ] = array(
    'type' => 'size',
    'title' => 'Input border size',
    'px_min' => 0,
    'px_max' => 10,
    
    'std_unit' => 'px',
    'std_size' => 1,
    
    'selectors' => [
        $input => 'border-width: {{SIZE}}{{UNIT}};',
    ],
);

$params[ 'input_border_radius' ] = array(
    'type' => 'size',
    'title' => 'Input border radius',
    'px_min' => 0,
    'px_max' => 50,
    
    'std_unit' => 'px',
    'std_size' => 0,
    
    'selectors' => [
        $input => 'border-radius: {{SIZE}}{{UNIT}};',
    ],
);

$params[] = [
    'type' => 'tab_close',
];

$params[ 'input_fucus_color' ] = array(
    'type' => 'color',
    'title' => 'Input focus text color',
    'selectors' => [
        $input_focus => 'color: {{VALUE}};',
    ],
    
    // tab
    'tab' => 'input_focus',
    'tab_title' => 'Focus',
);

$params[ 'input_focus_bg' ] = array(
    'type' => 'color',
    'title' => 'Input focus background color',
    'selectors' => [
        $input_focus => 'background-color: {{VALUE}};',
    ],
);

$params[ 'input_focus_border_color' ] = array(
    'type' => 'color',
    'title' => 'Input focus border color',
    'selectors' => [
        $input_focus => 'border-color: {{VALUE}};',
    ],
);

$params[] = [
    'type' => 'tab_close',
];

$params[] = [
    'type' => 'tabs_close',
];

/* BUTTON
------------------------------------------------------------------------ */
$params[ 'btn_typography' ] = array(
    'type' => 'typography',
    'title' => 'Button typography',
    'selector' => $button,
    
    // style
    'section' => 'button',
    'section_title' => 'Button Style',
    'section_tab' => 'style',
);

$params[ 'btn_color' ] = array(
    'type' => 'color',
    'title' => 'Button text color',
    'selectors' => [
        $button => 'color:{{VALUE}};',
    ],
    
    // tab
    'tab' => 'button_normal',
    'tab_title' => 'Normal',
    'tabs'     => 'button',
);

$params[ 'btn_bg' ] = array(
    'type' => 'color',
    'title' => 'Button background',
    'selectors' => [
        $button => 'background:{{VALUE}};',
    ],
);

$params[ 'btn_border_color' ] = array(
    'type' => 'color',
    'title' => 'Button border color',
    'selectors' => [
        $button => 'border-color:{{VALUE}};',
    ],
);

$params[ 'btn_padding' ] = array(
    'type' => 'size',
    'title' => 'Button padding',
    'px_min' => 0,
    'px_max' => 150,
    
    'std_unit' => 'px',
    'std_size' => 20,
    
    'selectors' => [
        $button => 'padding-left: {{SIZE}}{{UNIT}};padding-right: {{SIZE}}{{UNIT}};',
    ],
);

$params[ 'btn_border_width' ] = array(
    'type' => 'size',
    'title' => 'Button border size',
    'px_min' => 0,
    'px_max' => 10,
    
    'std_unit' => 'px',
    'std_size' => 0,
    
    'selectors' => [
        $button => 'border-width: {{SIZE}}{{UNIT}};',
    ],
);

$params[ 'btn_border_radius' ] = array(
    'type' => 'size',
    'title' => 'Button border radius',
    'px_min' => 0,
    'px_max' => 50,
    
    'std_unit' => 'px',
    'std_size' => 0,
    
    'selectors' => [
        $button => 'border-radius: {{SIZE}}{{UNIT}};',
    ],
);

$params[] = [
    'type' => 'tab_close',
];

$params[ 'btn_hover_color' ] = array(
    'type' => 'color',
    'title' => 'Button hover color',
    'selectors' => [
        $button_hover => 'color: {{VALUE}};',
    ],
    
    // tab
    'tab' => 'button_hover',
    'tab_title' => 'Hover',
);

$params[ 'btn_hover_bg' ] = array(
    'type' => 'color',
    'title' => 'Button hover background',
    'selectors' => [
        $button_hover => 'background: {{VALUE}};',
    ],
);

$params[ 'btn_hover_border_color' ] = array(
    'type' => 'color',
    'title' => 'Button hover border color',
    'selectors' => [
        $button_hover => 'border-color: {{VALUE}};',
    ],
);

$params[] = [
    'type' => 'tab_close',
];

$params[] = [
    'type' => 'tabs_close',
];