@import "project-setup";
$base-font-size: 16px;

@import "compass/typography/units";

.foo {
	width: 600px;
	height: 200px;
}

.foo .test {
	/* 16px for margins should be 1em */
	margin-top: convert-length(16px, em);

	/* 16px for margins should be 2.66667% (relative to parent's width) */
	margin-right: convert-length(16px, '%', $to-context: 600px);

	/* 1.35em for margins should be 3.6% (relative to parent's width,
	 * even for top and bottom margins) */
	margin-bottom: convert-length(1.35em, '%', $to-context: 600px);

	/* 16px for margins should be 2ex */
	margin-left: convert-length(16px, ex);
}

.bar {
	font-size: 18px;
	width: 360px;
}

.bar .test {
	/* 150% for line-height should be 27px */
	line-height: convert-length(150%, px, 18px);

	/* 1px should always be .0625rem for this page */
	border-top: convert-length(1px, rem);

	/* 2em for this element should be 9.525mm (relative to own font-size, as inherited) */
	margin-top: convert-length(2em, mm, 18px);

	/* 2px for margins should be .55556% (relative to parent's width) */
	margin-right: convert-length(2px, '%', $to-context: 360px);

	/* 1rem should always be 16px for this page, even when own font-size is 18px */
	margin-bottom: convert-length(1rem, px);
}

.rem {
  @include rem(border-width, 10px);
  @include rem(margin, 10px, false);
  @include rem(width, auto);
}
