@use "../../../css/wp-admin-colors";

.ame-border-sample-container {
	display: inline-block;
	vertical-align: baseline;
}

$sampleThickness: 3px;

.ame-border-sample {
	display: inline-block;
	border-width: $sampleThickness 0 0 0;
	border-color: wp-admin-colors.wpColor(gray-60);
	width: 14em;

	vertical-align: middle;
	padding-bottom: 2px;
}

.ame-border-sample--inset, .ame-border-sample--outset {
	//The color needs to be lighter to make the difference between the top and bottom borders visible.
	border-color: wp-admin-colors.wpColor(gray-20);

	//We may need to adjust the thickness to make the effect visible without making these samples
	//much larger than the others (which only have one border).
	$thickness: ($sampleThickness - 0px);

	//Show both horizontal borders to demonstrate the inset/outset effect.
	border-top-width: $thickness;
	border-bottom-width: $thickness;
	//No gap between the borders.
	padding-bottom: 0;
}