// Default responsive design for GridLayout
// opt-in by setting class "wc-respond" on its containing WPanel.
// This is a proof of concept and is probably overkill.
@include respond-small-screen {
	.wc-respond {
		// NOTE: I used loops here but removed them as the output CSS is much larger .
		// It seems that the Sass compiler and css-cleaner are not able to compress these complex rules correctly.
		> .wc-gridlayout-col-6,
		> .wc-gridlayout-col-7,
		> .wc-gridlayout-col-8,
		> .wc-gridlayout-col-9,
		> .wc-gridlayout-col-10,
		> .wc-gridlayout-col-11,
		> .wc-gridlayout-col-12 {
			> .wc_gl_row {
				@include flex-wrap(wrap);

				+ .wc_gl_row,
				> .wc-cell {
					margin-top: $wc-gap-small;
				}

				> :first-child,
				> :nth-child(2),
				> :nth-child(3) {
					margin-top: 0;
				}
			}
		}

		// 6, 9 cols simulate 3 cols
		> .wc-gridlayout-col-6,
		> .wc-gridlayout-col-9 {
			> .wc_gl_row {
				> .wc-cell {
					width: percentage(1 / 3);
				}

				> :nth-child(3n) {
					padding-right: 0;
				}

				> :nth-child(3n - 2) {
					padding-left: 0;
				}
			}

		}

		// 7, 8, 11, 12 simulate 4 cols.
		> .wc-gridlayout-col-7,
		> .wc-gridlayout-col-8,
		> .wc-gridlayout-col-11,
		> .wc-gridlayout-col-12 {
			> .wc_gl_row {
				> .wc-cell {
					width: 25%;
				}

				> :nth-child(4) {
					margin-top: 0;
				}

				> :nth-child(4n) {
					padding-right: 0;
				}

				> :nth-child(4n - 3) {
					padding-left: 0;
				}
			}
		}

		// 10 cols simulate 5 cols.
		> .wc-gridlayout-col-10 > .wc_gl_row {
			> .wc-cell {
				width: 20%;
			}

			> :nth-child(4),
			> :nth-child(5) {
				margin-top: 0;
			}

			> :nth-child(5n) {
				padding-right: 0;
			}

			> :nth-child(5n - 4) {
				padding-left: 0;
			}
		}
	}
}

@include respond-phonelike {
	.wc-respond {
		> .wc-gridlayout-col-5 > .wc_gl_row {
			@include flex-wrap(wrap);
		}

		> .wc-gridlayout > .wc_gl_row {
			> .wc-cell {
				margin-top: $wc-gap-small;
				width: 50%;
			}

			> :first-child,
			> :nth-child(2) {
				margin-top: 0;
			}
		}

		> .wc-gridlayout-col-4,
		> .wc-gridlayout-col-5,
		> .wc-gridlayout-col-7,
		> .wc-gridlayout-col-8,
		> .wc-gridlayout-col-11 {
			> .wc_gl_row {

				> :nth-child(even) {
					padding-right: 0;
				}

				> :nth-child(odd) {
					padding-left: 0;
				}
			}
		}

		> .wc-gridlayout-col-3,
		> .wc-gridlayout-col-6,
		> .wc-gridlayout-col-9,
		> .wc-gridlayout-col-12 {
			> .wc_gl_row {
				> .wc-cell {
					width: percentage(1 / 3);
				}

				> :nth-child(3) {
					margin-top: 0;
				}

				> :nth-child(3n) {
					padding-right: 0;
				}

				> :nth-child(3n - 2) {
					padding-left: 0;
				}
			}
		}
	}
}
