<template>
	<div :class="classList">
		<slot />
	</div>
</template>

<script lang="ts">
import Vue from 'vue';

export default Vue.extend({
	name: 'Container',

	props: {
		narrow: Boolean
	},

	computed: {
		classList(): any {
			return {
				'container': true,
				'container--narrow': this.narrow
			};
		}
	}
});
</script>

<style lang="scss">
.container {
	width: 100%;
	padding-left: 2rem;
	padding-right: 2rem;
	margin-left: auto;
	margin-right: auto;
	max-width: 1000px;

	@include breakpoint(md) {
		max-width: 901px;
	}

	@include breakpoint(lg) {
		max-width: 1201px;
	}

	@include breakpoint(xl) {
		max-width: 1400px;
	}

	&--narrow {
		max-width: 1000px;
	}
}
</style>