/**
 * Grid
 */

@use "~@wordpress/base-styles/colors" as wp-colors;

.newspack-grid {
	display: grid;
	grid-gap: 32px;
	grid-auto-rows: min-content;
	grid-template-columns: 1fr;
	margin: 32px 0;

	// No Margin
	&--no-margin {
		margin: 0;
	}

	// Gutter 0
	&__gutter-0 {
		grid-gap: 0;
	}

	// Gutter 8
	&__gutter-8 {
		grid-gap: 8px;
	}

	// Gutter 16
	&__gutter-16 {
		grid-gap: 16px;
	}

	// Gutter 24
	&__gutter-24 {
		grid-gap: 24px;
	}

	// Gutter 32
	&__gutter-32 {
		grid-gap: 32px;
	}

	// Row Gap 0
	&__row-gap-0 {
		grid-row-gap: 0;
	}

	// Row Gap 8
	&__row-gap-8 {
		grid-row-gap: 8px;
	}

	// Row Gap 16
	&__row-gap-16 {
		grid-row-gap: 16px;
	}

	// Row Gap 32
	&__row-gap-32 {
		grid-row-gap: 32px;
	}

	// Gutter 64
	&__gutter-64 {
		grid-gap: 64px;
	}

	// Columns 6
	&__columns-6 {
		grid-template-columns: repeat(2, 1fr);
	}

	// Media Queries - 744px
	@media screen and ( min-width: 744px ) {
		&__columns-2,
		&__columns-3,
		&__columns-4 {
			grid-template-columns: repeat(2, 1fr);
		}

		&__columns-6 {
			grid-template-columns: repeat(3, 1fr);
		}
	}

	// Media Queries - 1128px
	@media screen and ( min-width: 1128px ) {
		// Columns 3
		&__columns-3 {
			grid-template-columns: repeat(3, 1fr);
		}

		// Columns 4
		&__columns-4 {
			grid-template-columns: repeat(4, 1fr);
		}

		// Columns 6
		&__columns-6 {
			grid-template-columns: repeat(6, 1fr);
		}

		// Gutter 48
		&__gutter-48 {
			grid-gap: 48px;
		}

		// Gutter 64
		&__gutter-64 {
			grid-gap: 64px;
		}
	}

	// Children
	> * {
		margin-bottom: 0 !important;
		margin-top: 0 !important;
	}

	.components-base-control {
		&__field,
		&__help {
			margin-bottom: 0;
		}
	}

	.components-form-token-field {
		&__input-container {
			margin-bottom: 0;
		}
	}

	// Cards
	> .newspack-card {
		> *:first-child {
			margin-top: 0 !important;
		}

		> *:last-child {
			margin-bottom: 0 !important;
		}
	}

	// Table-like
	&__thead {
		background: rgba(black, 0.025);
		border-bottom: 1px solid wp-colors.$gray-300;
		border-top: 1px solid wp-colors.$gray-300;
		color: wp-colors.$gray-900;

		> *:not(.screen-reader-text) {
			padding: 8px;
		}
	}

	&__tbody {
		border-bottom: 1px solid wp-colors.$gray-300;
		padding: 8px 0;
	}

	&__thead + &__tbody,
	&__tbody + &__tbody {
		margin-top: -32px;
	}
}
