<?php
$formatter = Wpw::inst()->formatter();

$class_name = !empty($config['class_name'])
    ? '.' . $config['class_name']
    : '.spacing-custom';

// Md ============
$ms_generic_paddings_md = !empty($config['ms_generic_paddings_md'])
    ? $config['ms_generic_paddings_md']
    : '';
$ms_generic_paddings_md = $formatter->from_spacing($ms_generic_paddings_md);
$ms_generic_margins_md = !empty($config['ms_generic_margins_md'])
    ? $config['ms_generic_margins_md']
    : '';
$ms_generic_margins_md = $formatter->from_spacing($ms_generic_margins_md);

// Sm ============
$ms_generic_paddings_sm = !empty($config['ms_generic_paddings_sm'])
    ? $config['ms_generic_paddings_sm']
    : '';
$ms_generic_paddings_sm = $formatter->from_spacing($ms_generic_paddings_sm);
$ms_generic_margins_sm = !empty($config['ms_generic_margins_sm'])
    ? $config['ms_generic_margins_sm']
    : '';
$ms_generic_margins_sm = $formatter->from_spacing($ms_generic_margins_sm);

// Xs ============
$ms_generic_paddings_xs = !empty($config['ms_generic_paddings_xs'])
    ? $config['ms_generic_paddings_xs']
    : '';
$ms_generic_paddings_xs = $formatter->from_spacing($ms_generic_paddings_xs);
$ms_generic_margins_xs = !empty($config['ms_generic_margins_xs'])
    ? $config['ms_generic_margins_xs']
    : '';
$ms_generic_margins_xs = $formatter->from_spacing($ms_generic_margins_xs);

echo '

@media (max-width: 9999999px) {
    ' . $class_name . ',
    ' . $class_name . '-md,
    ' . $class_name . '-top,
    ' . $class_name . '-inner,
    ' . $class_name . '-md-top,
    ' . $class_name . '-md-inner,
    ' . $class_name . '-inner-top,
    ' . $class_name . '-md-inner-top {
        padding-top: '.$ms_generic_paddings_md['top_scalar'].';
    }

    ' . $class_name . ',
    ' . $class_name . '-md,
    ' . $class_name . '-bottom,
    ' . $class_name . '-inner,
    ' . $class_name . '-md-bottom,
    ' . $class_name . '-md-inner,
    ' . $class_name . '-inner-bottom,
    ' . $class_name . '-md-inner-bottom {
        padding-bottom: '.$ms_generic_paddings_md['bottom_scalar'].';
    }

    ' . $class_name . ',
    ' . $class_name . '-md,
    ' . $class_name . '-right,
    ' . $class_name . '-inner,
    ' . $class_name . '-md-right,
    ' . $class_name . '-md-inner,
    ' . $class_name . '-inner-right,
    ' . $class_name . '-md-inner-right {
        padding-right: '.$ms_generic_paddings_md['right_scalar'].';
    }

    ' . $class_name . ',
    ' . $class_name . '-md,
    ' . $class_name . '-left,
    ' . $class_name . '-inner,
    ' . $class_name . '-md-left,
    ' . $class_name . '-md-inner,
    ' . $class_name . '-inner-left,
    ' . $class_name . '-md-inner-left {
        padding-left: '.$ms_generic_paddings_md['left_scalar'].';
    }


    ' . $class_name . ',
    ' . $class_name . '-md,
    ' . $class_name . '-top,
    ' . $class_name . '-outer,
    ' . $class_name . '-md-top,
    ' . $class_name . '-md-outer,
    ' . $class_name . '-outer-top,
    ' . $class_name . '-md-outer-top {
        margin-top: '.$ms_generic_margins_md['top_scalar'].';
    }

    ' . $class_name . ',
    ' . $class_name . '-md,
    ' . $class_name . '-bottom,
    ' . $class_name . '-outer,
    ' . $class_name . '-md-bottom,
    ' . $class_name . '-md-outer,
    ' . $class_name . '-outer-bottom,
    ' . $class_name . '-md-outer-bottom {
        margin-bottom: '.$ms_generic_margins_md['bottom_scalar'].';
    }

    ' . $class_name . ',
    ' . $class_name . '-md,
    ' . $class_name . '-right,
    ' . $class_name . '-outer,
    ' . $class_name . '-md-right,
    ' . $class_name . '-md-outer,
    ' . $class_name . '-outer-right,
    ' . $class_name . '-md-outer-right {
        margin-right: '.$ms_generic_margins_md['right_scalar'].';
    }

    ' . $class_name . ',
    ' . $class_name . '-md,
    ' . $class_name . '-left,
    ' . $class_name . '-outer,
    ' . $class_name . '-md-left,
    ' . $class_name . '-md-outer,
    ' . $class_name . '-outer-left,
    ' . $class_name . '-md-outer-left {
        margin-left: '.$ms_generic_margins_md['left_scalar'].';
    }
}


@media (max-width: 991px) {
    ' . $class_name . ',
        ' . $class_name . '-sm,
        ' . $class_name . '-left,
        ' . $class_name . '-inner,
        ' . $class_name . '-sm-left,
        ' . $class_name . '-sm-inner,
        ' . $class_name . '-inner-left,
        ' . $class_name . '-sm-inner-left {
            padding-top: '.$ms_generic_paddings_sm['left_scalar'].';
        }

        ' . $class_name . ',
        ' . $class_name . '-sm,
        ' . $class_name . '-bottom,
        ' . $class_name . '-inner,
        ' . $class_name . '-sm-bottom,
        ' . $class_name . '-sm-inner,
        ' . $class_name . '-inner-bottom,
        ' . $class_name . '-sm-inner-bottom {
            padding-bottom: '.$ms_generic_paddings_sm['bottom_scalar'].';
        }

        ' . $class_name . ',
        ' . $class_name . '-sm,
        ' . $class_name . '-right,
        ' . $class_name . '-inner,
        ' . $class_name . '-sm-right,
        ' . $class_name . '-sm-inner,
        ' . $class_name . '-inner-right,
        ' . $class_name . '-sm-inner-right {
            padding-right: '.$ms_generic_paddings_sm['right_scalar'].';
        }

        ' . $class_name . ',
        ' . $class_name . '-sm,
        ' . $class_name . '-left,
        ' . $class_name . '-inner,
        ' . $class_name . '-sm-left,
        ' . $class_name . '-sm-inner,
        ' . $class_name . '-inner-left,
        ' . $class_name . '-sm-inner-left {
            padding-left: '.$ms_generic_paddings_sm['left_scalar'].';
        }


        ' . $class_name . ',
        ' . $class_name . '-sm,
        ' . $class_name . '-top,
        ' . $class_name . '-outer,
        ' . $class_name . '-sm-top,
        ' . $class_name . '-sm-outer,
        ' . $class_name . '-outer-top,
        ' . $class_name . '-sm-outer-top {
            margin-top: '.$ms_generic_margins_sm['top_scalar'].';
        }

        ' . $class_name . ',
        ' . $class_name . '-sm,
        ' . $class_name . '-bottom,
        ' . $class_name . '-outer,
        ' . $class_name . '-sm-bottom,
        ' . $class_name . '-sm-outer,
        ' . $class_name . '-outer-bottom,
        ' . $class_name . '-sm-outer-bottom {
            margin-bottom: '.$ms_generic_margins_sm['bottom_scalar'].';
        }

        ' . $class_name . ',
        ' . $class_name . '-sm,
        ' . $class_name . '-right,
        ' . $class_name . '-outer,
        ' . $class_name . '-sm-right,
        ' . $class_name . '-sm-outer,
        ' . $class_name . '-outer-right,
        ' . $class_name . '-sm-outer-right {
            margin-right: '.$ms_generic_margins_sm['right_scalar'].';
        }

        ' . $class_name . ',
        ' . $class_name . '-sm,
        ' . $class_name . '-left,
        ' . $class_name . '-outer,
        ' . $class_name . '-sm-left,
        ' . $class_name . '-sm-outer,
        ' . $class_name . '-outer-left,
        ' . $class_name . '-sm-outer-left {
            margin-left: '.$ms_generic_margins_sm['left_scalar'].';
        }
}

@media (max-width: 767px) {
    ' . $class_name . ',
        ' . $class_name . '-xs,
        ' . $class_name . '-left,
        ' . $class_name . '-inner,
        ' . $class_name . '-xs-left,
        ' . $class_name . '-xs-inner,
        ' . $class_name . '-inner-left,
        ' . $class_name . '-xs-inner-left {
            padding-top: '.$ms_generic_paddings_xs['left_scalar'].';
        }

        ' . $class_name . ',
        ' . $class_name . '-xs,
        ' . $class_name . '-bottom,
        ' . $class_name . '-inner,
        ' . $class_name . '-xs-bottom,
        ' . $class_name . '-xs-inner,
        ' . $class_name . '-inner-bottom,
        ' . $class_name . '-xs-inner-bottom {
            padding-bottom: '.$ms_generic_paddings_xs['bottom_scalar'].';
        }

        ' . $class_name . ',
        ' . $class_name . '-xs,
        ' . $class_name . '-right,
        ' . $class_name . '-inner,
        ' . $class_name . '-xs-right,
        ' . $class_name . '-xs-inner,
        ' . $class_name . '-inner-right,
        ' . $class_name . '-xs-inner-right {
            padding-right: '.$ms_generic_paddings_xs['right_scalar'].';
        }

        ' . $class_name . ',
        ' . $class_name . '-xs,
        ' . $class_name . '-left,
        ' . $class_name . '-inner,
        ' . $class_name . '-xs-left,
        ' . $class_name . '-xs-inner,
        ' . $class_name . '-inner-left,
        ' . $class_name . '-xs-inner-left {
            padding-left: '.$ms_generic_paddings_xs['left_scalar'].';
        }


        ' . $class_name . ',
        ' . $class_name . '-xs,
        ' . $class_name . '-top,
        ' . $class_name . '-outer,
        ' . $class_name . '-xs-top,
        ' . $class_name . '-xs-outer,
        ' . $class_name . '-outer-top,
        ' . $class_name . '-xs-outer-top {
            margin-top: '.$ms_generic_margins_xs['top_scalar'].';
        }

        ' . $class_name . ',
        ' . $class_name . '-xs,
        ' . $class_name . '-bottom,
        ' . $class_name . '-outer,
        ' . $class_name . '-xs-bottom,
        ' . $class_name . '-xs-outer,
        ' . $class_name . '-outer-bottom,
        ' . $class_name . '-xs-outer-bottom {
            margin-bottom: '.$ms_generic_margins_xs['bottom_scalar'].';
        }

        ' . $class_name . ',
        ' . $class_name . '-xs,
        ' . $class_name . '-right,
        ' . $class_name . '-outer,
        ' . $class_name . '-xs-right,
        ' . $class_name . '-xs-outer,
        ' . $class_name . '-outer-right,
        ' . $class_name . '-xs-outer-right {
            margin-right: '.$ms_generic_margins_xs['right_scalar'].';
        }

        ' . $class_name . ',
        ' . $class_name . '-xs,
        ' . $class_name . '-left,
        ' . $class_name . '-outer,
        ' . $class_name . '-xs-left,
        ' . $class_name . '-xs-outer,
        ' . $class_name . '-outer-left,
        ' . $class_name . '-xs-outer-left {
            margin-left: '.$ms_generic_margins_xs['left_scalar'].';
        }
}


';