/* In the [$o-card-grid] map we define some settings:
 *
 * 'columns'.key 	=	number of items in a row
 * 'columns'.value 	= 	breakpoint size from which we want that number of items
 */


$o-card-grid: (
	'gap' : space(1),
	'columns': (
		2: 740,
	),
);

// Get values from the map and place them in an easy to access variable
$o-card-grid-columns: 				map-get($o-card-grid, 'columns'); // get the 'columns' list
$o-card-grid-column-keys: 			map-keys($o-card-grid-columns); // get a list of the keys from the 'columns'
$o-card-grid-column-smallest-bp: 	map-get($o-card-grid-columns, nth($o-card-grid-column-keys, 1)); // get breakpoint value of the first column

.o-card-grid {
	position: relative;
}

.o-card-grid--pull-up {
	@include mq($max: 580) {
		margin-top: space(6);
	}
	@include mq(580) {
		margin-top: space(-12.5);
	}
}

.o-card-grid--no-pagination {
	padding-bottom: space(8);
}

@include mq($o-card-grid-column-smallest-bp) {
	.o-card-grid__main {
		display: flex;
		flex-wrap: wrap;
		margin: map-get($o-card-grid, 'gap') * -1;

		.o-card-grid--align-right & {
			flex-direction: row-reverse;
		}
	}
}


.o-card-grid__item {
	max-width: 444px; // constrain the width of the element inside
	margin: map-get($o-card-grid, 'gap') auto;


	// Loop through all defined columns
	@each $count, $breakpoint in $o-card-grid-columns {
		$i: index($o-card-grid-columns, ($count $breakpoint));

		@include mq(map-get($o-card-grid-columns, $count)) {
			@if($i == 1) {
				// Only set these values for the first media query, no need to set them every time
				flex: none;
				margin: map-get($o-card-grid, 'gap');
			}

			// in case of a bug in IE we need to specify flex-basis longhand property: https://github.com/philipwalton/flexbugs#flexbug-8
			flex-basis: calc(#{percentage(1 / $count)} - (#{map-get($o-card-grid, 'gap')} * 2));
		}
	}
}

.o-card-grid__pagination {
	padding: space(6) 0;
	.c-pagination {
		width: 100%;
		max-width: 904px;
	}

	.o-card-grid--align-right & {
		text-align: right;
	}
}