/**
 * Divider
 */

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

.newspack-divider {
	background: transparent;
	border: 0;
	display: block;
	height: 1px;
	margin-bottom: min(32px, var(--divider-margin-bottom, 64px));
	margin-left: 0;
	margin-right: 0;
	margin-top: min(32px, var(--divider-margin-top, 64px));
	padding: 0;

	@media screen and (min-width: 783px) {
		margin-bottom: var(--divider-margin-bottom, 64px);
		margin-top: var(--divider-margin-top, 64px);
	}

	// Alignment

	&--alignment-full-width {
		margin-left: calc(-50vw + 50%);
		width: 100vw;
	}

	&--alignment-none {
		width: 100%;
	}

	// Variant

	&--variant-default {
		background-color: var( --wpds-color-stroke-surface-neutral, #{wp-colors.$gray-300} );
	}

	&--variant-primary {
		background-color: var(--wp-admin-theme-color);
	}

	&--variant-secondary {
		background-color: wp-colors.$gray-200;
	}

	&--variant-tertiary {
		// Fallback for consumers whose bundle doesn't carry the wpds token sheet
		// (it ships with the Page header's stylesheet).
		background-color: var( --wpds-color-stroke-surface-neutral-weak, #{wp-colors.$gray-100} );
	}
}