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

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

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

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

	display: flex;
	align-items: center;
	color: #5c5d68;

	@include dark {
		color: #c0c1ce;
	}

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

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