@import '@financial-times/math';
@import '@financial-times/sass-mq';
@import 'src/scss/variables';
@import 'src/scss/functions';
@import 'src/scss/mixins';

/// Output o-grid styles. This mixin outputs all styles by default.
/// Pass an options argument to include styles granularly, see the
/// [README](https://registry.origami.ft.com/components/o-grid/readme) for more details.
///
/// @example <caption>Output all o-grid styles.</caption>
/// 	@include oGrid();
/// @example <caption>Output only basic grid styles.</caption>
/// 	@include oGrid($opts: ());
/// @example <caption>Output all o-grid styles except human friendly selectors.</caption>
/// 	@include oGrid($opts: (
/// 		'bleed': true,
/// 		'shuffle-selectors': true,
/// 		'surface': ('current-layout', 'layout-sizes'),
/// 		'rows': ('compact')
/// 	));
/// @example <caption>Output all o-grid styles except the styles required to surface layouts to o-grid JS.</caption>
/// 	@include oGrid($opts: (
/// 		'bleed': true,
/// 		'shuffle-selectors': true,
/// 		'friendly-selectors': true,
/// 		'surface': (),
/// 		'rows': ('compact')
/// 	));
///
/// @param {Map} $opts [('bleed': true, 'shuffle-selectors': true, 'friendly-selectors': true, 'surface': ('current-layout', 'layout-sizes'), 'rows': ('compact'))]
@mixin oGrid($opts: (
	'bleed': true,
	'shuffle-selectors': true,
	'friendly-selectors': true,
	'surface': ('current-layout', 'layout-sizes'),
	'rows': ('compact')
)) {
	// Bleed styles e.g. `o-grid-container--bleed`.
	$bleed: map-get($opts, 'bleed');
	// Human friendly selectors, e.g. `data-o-grid-colspan="one-half"`.
	$friendly-selectors: map-get($opts, 'friendly-selectors');
	// Offset, push, and pull selectors, e.g. `push4`.
	$shuffle-selectors: map-get($opts, 'shuffle-selectors');
	// Compact rows, e.g. `o-grid-row--compact`.
	$rows: map-get($opts, 'rows');
	$compact-rows: index($rows, 'compact');
	// Surce layout details for JS.
	$surface: map-get($opts, 'surface');
	$current-layout: index($surface, 'current-layout');
	$layout-sizes: index($surface, 'layout-sizes');

	// Surface layouts for JS on html:after, html:before.
	@if($current-layout) {
		@include oGridSurfaceCurrentLayout;
	}

	@if($layout-sizes) {
		@include oGridSurfaceLayoutSizes;
	}

	// Grid container
	.o-grid-container {
		@include oGridContainer();
	}

	@if($bleed) {
		.o-grid-container--bleed {
			padding-left: 0;
			padding-right: 0;
		}
	}

	// Grid row
	.o-grid-row {
		@include oGridRow;
	}

	// Compact, gutterless row of columns
	@if($compact-rows) {
		.o-grid-row--compact {
			margin-left: 0;

			> [data-o-grid-colspan] {
				padding-left: 0;
			}
		}
	}

	// Grid columns
	[data-o-grid-colspan] {
		@include oGridColspan();
	}

	[data-o-grid-colspan~="0"] {
		display: none;
	}

	@for $colspan from 1 through $o-grid-columns {
		[data-o-grid-colspan~="#{$colspan}"] {
			@include oGridColspan($colspan, $width-only: true);
		}
	}

	@if $friendly-selectors {
		@include _oGridHumanFriendlyColumns; // one-half, one-third, center…
	}

	@if $shuffle-selectors {
		@include _oGridShuffleColumns; // pull, push, offset
	}

	// Responsive columns
	@each $layout-name in $_o-grid-layout-names {
		@include oGridRespondTo($layout-name) {

			@if $friendly-selectors {
				@include _oGridHumanFriendlyColumns($layout-name);
			}

			@if $shuffle-selectors == true {
				@include _oGridShuffleColumns($layout-name);
			}

			[data-o-grid-colspan~="#{$layout-name}0"] {
				display: none;
			}

			@for $colspan from 1 through $o-grid-columns {
				[data-o-grid-colspan~="#{$layout-name}#{$colspan}"] {
					// Restore visibility from `display: none`
					// if `data-o-grid-colspan` was set to `0` or `hide`
					display: block;

					// Apply width in %
					@include _oGridFixSafariWrap($colspan); //stylelint-disable-line order/order
					min-width: oGridColspan($colspan);
					max-width: oGridColspan($colspan);
					width: oGridColspan($colspan);
				}
			}
		}
	}
}

@if $o-grid-is-silent == false {
	@include oGrid();

	// Turn silent mode back on to avoid outputting the grid twice
	$o-grid-is-silent: true;
}