<template>
	<div class="section-title">
		<w-icon class="section-title__icon">
			{{ icon }}
		</w-icon>
		<slot />
	</div>
</template>

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

export default Vue.extend({
	name: 'SectionTitle',
	props: {
		icon: {
			type: String,
			required: true
		}
	}
});
</script>

<style lang="scss">
.section-title {
	@include font-weight(semibold);
	@include font-size(lg);
	@include padding(1, l);

	display: flex;
	align-items: center;
	color: #525252;

	@include dark {
		color: rgb(163, 163, 163);
	}

	&__icon {
		@include margin(2, r);

		transform: translateY(0.125rem);
	}
}
</style>