<?php

defined('ABSPATH') || die("Can't access directly");
function wpbf_premium_responsive_customizer_css()
{
    if (!wpbf_has_responsive_breakpoints()) {
        return;
    }
    $breakpoint_mobile_int = wpbf_breakpoint_mobile();
    $breakpoint_medium_int = wpbf_breakpoint_medium();
    $breakpoint_desktop_int = wpbf_breakpoint_desktop();
    $breakpoint_mobile = $breakpoint_mobile_int . 'px';
    $breakpoint_medium = $breakpoint_medium_int . 'px';
    $breakpoint_desktop = $breakpoint_desktop_int . 'px';
    $margin_large = $padding_large = '80px';
    $margin_medium = $padding_medium = '40px';
    $margin = $padding = '20px';
    ?>

	/* From <?php 
    echo esc_attr($breakpoint_mobile_int) + 1;
    ?>px | Phone Landscape & Bigger */
	@media (min-width: <?php 
    echo esc_attr($breakpoint_mobile_int) + 1;
    ?>px) {

		/* Grid */
		.wpbf-grid-small-1-1 > * {
			width: 100%;
		}
		.wpbf-grid-small-1-2 > * {
			width: 50%;
		}
		.wpbf-grid-small-1-3 > * {
			width: 33.333%;
		}
		.wpbf-grid-small-2-3 > * {
			width: 66.666%;
		}
		.wpbf-grid-small-1-4 > * {
			width: 25%;
		}
		.wpbf-grid-small-1-5 > * {
			width: 20%;
		}
		.wpbf-grid-small-1-6 > * {
			width: 16.666%;
		}
		.wpbf-grid-small-1-10 > * {
			width: 10%;
		}

		/* Grid Cells */

		/* Whole */
		.wpbf-small-1-1 {
			width: 100%;
		}
		/* Halves */
		.wpbf-small-1-2,
		.wpbf-small-2-4,
		.wpbf-small-3-6,
		.wpbf-small-5-10 {
			width: 50%;
		}
		/* Thirds */
		.wpbf-small-1-3,
		.wpbf-small-2-6 {
			width: 33.333%;
		}
		.wpbf-small-2-3,
		.wpbf-small-4-6 {
			width: 66.666%;
		}
		/* Quarters */
		.wpbf-small-1-4 {
			width: 25%;
		}
		.wpbf-small-3-4 {
			width: 75%;
		}
		/* Fifths */
		.wpbf-small-1-5,
		.wpbf-small-2-10 {
			width: 20%;
		}
		.wpbf-small-2-5,
		.wpbf-small-4-10 {
			width: 40%;
		}
		.wpbf-small-3-5,
		.wpbf-small-6-10 {
			width: 60%;
		}
		.wpbf-small-4-5,
		.wpbf-small-8-10 {
			width: 80%;
		}
		/* Sixths */
		.wpbf-small-1-6 {
			width: 16.666%;
		}
		.wpbf-small-5-6 {
			width: 83.333%;
		}
		/* Tenths */
		.wpbf-small-1-10 {
			width: 10%;
		}
		.wpbf-small-3-10 {
			width: 30%;
		}
		.wpbf-small-7-10 {
			width: 70%;
		}
		.wpbf-small-9-10 {
			width: 90%;
		}

	}

	/* From <?php 
    echo esc_attr($breakpoint_medium_int) + 1;
    ?>px | Tablet & Bigger */
	@media (min-width: <?php 
    echo esc_attr($breakpoint_medium_int) + 1;
    ?>px) {

		/* Gutenberg */

		.wpbf-no-sidebar .alignwide {
			margin-left: -50px;
			margin-right: -50px;
			max-width: unset;
		}

		/* Sidebar */
		.wpbf-grid-divider > [class*='wpbf-medium-']:not(.wpbf-medium-1-1):nth-child(n+2) {
			border-left: 1px solid #d9d9e0;
		}

		/* Grid */
		.wpbf-grid-medium-1-1 > * {
			width: 100%;
		}
		.wpbf-grid-medium-1-2 > * {
			width: 50%;
		}
		.wpbf-grid-medium-1-3 > * {
			width: 33.333%;
		}
		.wpbf-grid-medium-2-3 > * {
			width: 66.666%;
		}
		.wpbf-grid-medium-1-4 > * {
			width: 25%;
		}
		.wpbf-grid-medium-1-5 > * {
			width: 20%;
		}
		.wpbf-grid-medium-1-6 > * {
			width: 16.666%;
		}
		.wpbf-grid-medium-1-10 > * {
			width: 10%;
		}

		/* Grid Cells */

		/* Whole */
		.wpbf-medium-1-1 {
			width: 100%;
		}
		/* Halves */
		.wpbf-medium-1-2,
		.wpbf-medium-2-4,
		.wpbf-medium-3-6,
		.wpbf-medium-5-10 {
			width: 50%;
		}
		/* Thirds */
		.wpbf-medium-1-3,
		.wpbf-medium-2-6 {
			width: 33.333%;
		}
		.wpbf-medium-2-3,
		.wpbf-medium-4-6 {
			width: 66.666%;
		}
		/* Quarters */
		.wpbf-medium-1-4 {
			width: 25%;
		}
		.wpbf-medium-3-4 {
			width: 75%;
		}
		/* Fifths */
		.wpbf-medium-1-5,
		.wpbf-medium-2-10 {
			width: 20%;
		}
		.wpbf-medium-2-5,
		.wpbf-medium-4-10 {
			width: 40%;
		}
		.wpbf-medium-3-5,
		.wpbf-medium-6-10 {
			width: 60%;
		}
		.wpbf-medium-4-5,
		.wpbf-medium-8-10 {
			width: 80%;
		}
		/* Sixths */
		.wpbf-medium-1-6 {
			width: 16.666%;
		}
		.wpbf-medium-5-6 {
			width: 83.333%;
		}
		/* Tenths */
		.wpbf-medium-1-10 {
			width: 10%;
		}
		.wpbf-medium-3-10 {
			width: 30%;
		}
		.wpbf-medium-7-10 {
			width: 70%;
		}
		.wpbf-medium-9-10 {
			width: 90%;
		}

	}

	/* From <?php 
    echo esc_attr($breakpoint_desktop_int) + 1;
    ?>px | Desktop & Bigger */
	@media (min-width: <?php 
    echo esc_attr($breakpoint_desktop_int) + 1;
    ?>px) {

		/* Gutenberg */

		.wpbf-no-sidebar .alignwide {
			margin-left: -75px;
			margin-right: -75px;
		}

		/* Sidebar */
		.wpbf-grid-divider > [class*='wpbf-large-']:not(.wpbf-large-1-1):nth-child(n+2) {
			border-left:		1px solid #d9d9e0;
		}

		/* Grid */
		.wpbf-grid-large-1-1 > * {
			width: 100%;
		}
		.wpbf-grid-large-1-2 > * {
			width: 50%;
		}
		.wpbf-grid-large-1-3 > * {
			width: 33.333%;
		}
		.wpbf-grid-large-2-3 > * {
			width: 66.666%;
		}
		.wpbf-grid-large-1-4 > * {
			width: 25%;
		}
		.wpbf-grid-large-1-5 > * {
			width: 20%;
		}
		.wpbf-grid-large-1-6 > * {
			width: 16.666%;
		}
		.wpbf-grid-large-1-10 > * {
			width: 10%;
		}

		/* Grid Cells */

		/* Whole */
		.wpbf-large-1-1 {
			width: 100%;
		}
		/* Halves */
		.wpbf-large-1-2,
		.wpbf-large-2-4,
		.wpbf-large-3-6,
		.wpbf-large-5-10 {
			width: 50%;
		}
		/* Thirds */
		.wpbf-large-1-3,
		.wpbf-large-2-6 {
			width: 33.333%;
		}
		.wpbf-large-2-3,
		.wpbf-large-4-6 {
			width: 66.666%;
		}
		/* Quarters */
		.wpbf-large-1-4 {
			width: 25%;
		}
		.wpbf-large-3-4 {
			width: 75%;
		}
		/* Fifths */
		.wpbf-large-1-5,
		.wpbf-large-2-10 {
			width: 20%;
		}
		.wpbf-large-2-5,
		.wpbf-large-4-10 {
			width: 40%;
		}
		.wpbf-large-3-5,
		.wpbf-large-6-10 {
			width: 60%;
		}
		.wpbf-large-4-5,
		.wpbf-large-8-10 {
			width: 80%;
		}
		/* Sixths */
		.wpbf-large-1-6 {
			width: 16.666%;
		}
		.wpbf-large-5-6 {
			width: 83.333%;
		}
		/* Tenths */
		.wpbf-large-1-10 {
			width: 10%;
		}
		.wpbf-large-3-10 {
			width: 30%;
		}
		.wpbf-large-7-10 {
			width: 70%;
		}
		.wpbf-large-9-10 {
			width: 90%;
		}

	}

	/* From 1201px | Large Screen & Bigger */
	@media (min-width: 1201px) {

		.wpbf-grid-xlarge-1-1 > * {
			width: 100%;
		}
		.wpbf-grid-xlarge-1-2 > * {
			width: 50%;
		}
		.wpbf-grid-xlarge-1-3 > * {
			width: 33.333%;
		}
		.wpbf-grid-xlarge-2-3 > * {
			width: 66.666%;
		}
		.wpbf-grid-xlarge-1-4 > * {
			width: 25%;
		}
		.wpbf-grid-xlarge-1-5 > * {
			width: 20%;
		}
		.wpbf-grid-xlarge-1-6 > * {
			width: 16.666%;
		}
		.wpbf-grid-xlarge-1-10 > * {
			width: 10%;
		}

		/* Grid Cells */

		/* Whole */
		.wpbf-xlarge-1-1 {
			width: 100%;
		}
		/* Halves */
		.wpbf-xlarge-1-2,
		.wpbf-xlarge-2-4,
		.wpbf-xlarge-3-6,
		.wpbf-xlarge-5-10 {
			width: 50%;
		}
		/* Thirds */
		.wpbf-xlarge-1-3,
		.wpbf-xlarge-2-6 {
			width: 33.333%;
		}
		.wpbf-xlarge-2-3,
		.wpbf-xlarge-4-6 {
			width: 66.666%;
		}
		/* Quarters */
		.wpbf-xlarge-1-4 {
			width: 25%;
		}
		.wpbf-xlarge-3-4 {
			width: 75%;
		}
		/* Fifths */
		.wpbf-xlarge-1-5,
		.wpbf-xlarge-2-10 {
			width: 20%;
		}
		.wpbf-xlarge-2-5,
		.wpbf-xlarge-4-10 {
			width: 40%;
		}
		.wpbf-xlarge-3-5,
		.wpbf-xlarge-6-10 {
			width: 60%;
		}
		.wpbf-xlarge-4-5,
		.wpbf-xlarge-8-10 {
			width: 80%;
		}
		/* Sixths */
		.wpbf-xlarge-1-6 {
			width: 16.666%;
		}
		.wpbf-xlarge-5-6 {
			width: 83.333%;
		}
		/* Tenths */
		.wpbf-xlarge-1-10 {
			width: 10%;
		}
		.wpbf-xlarge-3-10 {
			width: 30%;
		}
		.wpbf-xlarge-7-10 {
			width: 70%;
		}
		.wpbf-xlarge-9-10 {
			width: 90%;
		}

	}

	/* Until 1200 */
	@media screen and (max-width: 1200px) {

		/* Margin */
		.wpbf-margin-xlarge {
			margin-top: <?php 
    echo $margin_large;
    ?>;
			margin-bottom: <?php 
    echo $margin_large;
    ?>;
		}
		.wpbf-margin-xlarge-top {
			margin-top: <?php 
    echo $margin_large;
    ?>;
		}
		.wpbf-margin-xlarge-bottom {
			margin-bottom: <?php 
    echo $margin_large;
    ?>;
		}
		.wpbf-margin-xlarge-left {
			margin-left: <?php 
    echo $margin_large;
    ?>;
		}
		.wpbf-margin-xlarge-right {
			margin-right: <?php 
    echo $margin_large;
    ?>;
		}

		/* Padding */
		.wpbf-padding-xlarge {
			padding-top: <?php 
    echo $padding_large;
    ?>;
			padding-bottom: <?php 
    echo $padding_large;
    ?>;
		}
		.wpbf-padding-xlarge-top {
			padding-top: <?php 
    echo $padding_large;
    ?>;
		}
		.wpbf-padding-xlarge-bottom {
			padding-bottom: <?php 
    echo $padding_large;
    ?>;
		}
		.wpbf-padding-xlarge-left {
			padding-left: <?php 
    echo $padding_large;
    ?>;
		}
		.wpbf-padding-xlarge-right {
			padding-right: <?php 
    echo $padding_large;
    ?>;
		}

	}

	/* Until <?php 
    echo esc_attr($breakpoint_desktop);
    ?> */
	@media screen and (max-width: <?php 
    echo esc_attr($breakpoint_desktop);
    ?>) {

		/* Margin */
		.wpbf-margin-large, .wpbf-margin-xlarge {
			margin-top: <?php 
    echo $margin_medium;
    ?>;
			margin-bottom: <?php 
    echo $margin_medium;
    ?>;
		}
		.wpbf-margin-large-top {
			margin-top: <?php 
    echo $margin_medium;
    ?>;
		}
		.wpbf-margin-large-bottom {
			margin-bottom: <?php 
    echo $margin_medium;
    ?>;
		}
		.wpbf-margin-large-left {
			margin-left: <?php 
    echo $margin_medium;
    ?>;
		}
		.wpbf-margin-large-right {
			margin-right: <?php 
    echo $margin_medium;
    ?>;
		}
		.wpbf-margin-xlarge-top {
			margin-top: <?php 
    echo $margin_medium;
    ?>;
		}
		.wpbf-margin-xlarge-bottom {
			margin-bottom: <?php 
    echo $margin_medium;
    ?>;
		}
		.wpbf-margin-xlarge-left {
			margin-left: <?php 
    echo $margin_medium;
    ?>;
		}
		.wpbf-margin-xlarge-right {
			margin-right: <?php 
    echo $margin_medium;
    ?>;
		}

		/* Padding */
		.wpbf-padding-large, .wpbf-padding-xlarge {
			padding-top: <?php 
    echo $padding_medium;
    ?>;
			padding-bottom: <?php 
    echo $padding_medium;
    ?>;
		}
		.wpbf-padding-large-top {
			padding-top: <?php 
    echo $padding_medium;
    ?>;
		}
		.wpbf-padding-large-bottom {
			padding-bottom: <?php 
    echo $padding_medium;
    ?>;
		}
		.wpbf-padding-large-left {
			padding-left: <?php 
    echo $padding_medium;
    ?>;
		}
		.wpbf-padding-large-right {
			padding-right: <?php 
    echo $padding_medium;
    ?>;
		}
		.wpbf-padding-xlarge-top {
			padding-top: <?php 
    echo $padding_medium;
    ?>;
		}
		.wpbf-padding-xlarge-bottom {
			padding-bottom: <?php 
    echo $padding_medium;
    ?>;
		}
		.wpbf-padding-xlarge-left {
			padding-left: <?php 
    echo $padding_medium;
    ?>;
		}
		.wpbf-padding-xlarge-right {
			padding-right: <?php 
    echo $padding_medium;
    ?>;
		}

	}

	/* Until <?php 
    echo esc_attr($breakpoint_medium);
    ?> */
	@media screen and (max-width: <?php 
    echo esc_attr($breakpoint_medium);
    ?>) {

		/* General */

		.wpbf-footer-two-columns,
		.wpbf-pre-header-two-columns {
			display: block;
		}

		.wpbf-footer-two-columns .wpbf-inner-footer-left,
		.wpbf-footer-two-columns .wpbf-inner-footer-right,
		.wpbf-pre-header-two-columns .wpbf-inner-pre-header-left,
		.wpbf-pre-header-two-columns .wpbf-inner-pre-header-right {
			display: block;
			width: 100%;
			text-align: center;
		}

		.wpbf-page-footer .wpbf-inner-footer-right .wpbf-menu {
			float: none;
			width: 100%;
	 		display: flex;
	 		align-items: center;
	 		justify-content: center;
		}

		.wpbf-page-footer .wpbf-inner-footer-left .wpbf-menu {
			float: none;
			width: 100%;
	 		display: flex;
	 		align-items: center;
	 		justify-content: center;
		}

	}

	/* Until <?php 
    echo esc_attr($breakpoint_mobile);
    ?> */
	@media screen and (max-width: <?php 
    echo esc_attr($breakpoint_mobile);
    ?>) {

		/* Margin */
		.wpbf-margin-medium, .wpbf-margin-large, .wpbf-margin-xlarge {
			margin-top: <?php 
    echo $margin;
    ?>;
			margin-bottom: <?php 
    echo $margin;
    ?>;
		}
		.wpbf-margin-large-top {
			margin-top: <?php 
    echo $margin;
    ?>;
		}
		.wpbf-margin-large-bottom {
			margin-bottom: <?php 
    echo $margin;
    ?>;
		}
		.wpbf-margin-large-left {
			margin-left: <?php 
    echo $margin;
    ?>;
		}
		.wpbf-margin-large-right {
			margin-right: <?php 
    echo $margin;
    ?>;
		}
		.wpbf-margin-medium-top {
			margin-top: <?php 
    echo $margin;
    ?>;
		}
		.wpbf-margin-medium-bottom {
			margin-bottom: <?php 
    echo $margin;
    ?>;
		}
		.wpbf-margin-medium-left {
			margin-left: <?php 
    echo $margin;
    ?>;
		}
		.wpbf-margin-medium-right {
			margin-right: <?php 
    echo $margin;
    ?>;
		}
		.wpbf-margin-xlarge-top {
			margin-top: <?php 
    echo $margin;
    ?>;
		}
		.wpbf-margin-xlarge-bottom {
			margin-bottom: <?php 
    echo $margin;
    ?>;
		}
		.wpbf-margin-xlarge-left {
			margin-left: <?php 
    echo $margin;
    ?>;
		}
		.wpbf-margin-xlarge-right {
			margin-right: <?php 
    echo $margin;
    ?>;
		}

		/* Padding */
		.wpbf-padding-medium, .wpbf-padding-large, .wpbf-padding-xlarge {
			padding-top: <?php 
    echo $padding;
    ?>;
			padding-bottom: <?php 
    echo $padding;
    ?>;
		}
		.wpbf-padding-large-top {
			padding-top: <?php 
    echo $padding;
    ?>;
		}
		.wpbf-padding-large-bottom {
			padding-bottom: <?php 
    echo $padding;
    ?>;
		}
		.wpbf-padding-large-left {
			padding-left: <?php 
    echo $padding;
    ?>;
		}
		.wpbf-padding-large-right {
			padding-right: <?php 
    echo $padding;
    ?>;
		}
		.wpbf-padding-medium-top {
			padding-top: <?php 
    echo $padding;
    ?>;
		}
		.wpbf-padding-medium-bottom {
			padding-bottom: <?php 
    echo $padding;
    ?>;
		}
		.wpbf-padding-medium-left {
			padding-left: <?php 
    echo $padding;
    ?>;
		}
		.wpbf-padding-medium-right {
			padding-right: <?php 
    echo $padding;
    ?>;
		}
		.wpbf-padding-xlarge-top {
			padding-top: <?php 
    echo $padding;
    ?>;
		}
		.wpbf-padding-xlarge-bottom {
			padding-bottom: <?php 
    echo $padding;
    ?>;
		}
		.wpbf-padding-xlarge-left {
			padding-left: <?php 
    echo $padding;
    ?>;
		}
		.wpbf-padding-xlarge-right {
			padding-right: <?php 
    echo $padding;
    ?>;
		}

	}

	/* Visibility */

	/* Desktop and bigger */
	@media (min-width: <?php 
    echo esc_attr($breakpoint_desktop_int) + 1;
    ?>px) {
		.wpbf-visible-small {
			display: none !important;
		}
		.wpbf-visible-medium {
			display: none !important;
		}
		.wpbf-hidden-large {
			display: none !important;
		}
	}
	/* Tablets portrait */
	@media (min-width: <?php 
    echo esc_attr($breakpoint_medium_int) + 1;
    ?>px) and (max-width: <?php 
    echo esc_attr($breakpoint_desktop);
    ?>) {
		.wpbf-visible-small {
			display: none !important;
		}
		.wpbf-visible-large {
			display: none !important ;
		}
		.wpbf-hidden-medium {
			display: none !important;
		}
	}
	/* Tablets */
	@media (max-width: <?php 
    echo esc_attr($breakpoint_medium);
    ?>) {
		.wpbf-visible-medium {
			display: none !important;
		}
		.wpbf-visible-large {
			display: none !important;
		}
		.wpbf-hidden-small {
			display: none !important;
		}
	}

<?php 
}
add_action('wpbf_after_customizer_css', 'wpbf_premium_responsive_customizer_css', 20);