<Docs title="default">
	<div style="width: 100%;">
		<DevPageGrid is-visible={true} />

		<div class="DevComponentWidthCol6" style="background-color: rgb(197, 213, 182);">Col 6 (6 / 12)</div>

		<div class="DevComponentWidthCol8" style="background-color: rgb(230, 185, 184);">Col 8 (8 / 12)</div>

		<div class="DevComponentWidthCol10" style="background-color: rgb(183, 197, 214);">Col 10 (10 / 12)</div>

		<div class="DevComponentWidthDefault" style="background-color: rgb(246, 240, 216);">Default (12 / 12)</div>

		<div class="DevComponentWidthFull" style="background-color: rgb(246, 240, 216);">Full (full page width - sitepadding)</div>
	</div>
</Docs>

<style lang="scss" scoped>
@use "@/assets/css/mixins" as *;

.DevComponentWidthCol6,
.DevComponentWidthCol8,
.DevComponentWidthCol10,
.DevComponentWidthDefault,
.DevComponentWidthFull {
	margin-bottom: 20px;
	padding: 10px;
	font-family: 'Courier New', monospace;
}

.DevComponentWidthCol6 {
	@include component-width("col-6");
}

.DevComponentWidthCol8 {
	@include component-width("col-8");
}

.DevComponentWidthCol10 {
	@include component-width("col-10");
}

.DevComponentWidthDefault {
	@include component-width("default");
}


.DevComponentWidthFull {
	@include component-width("full");
}
</style>