<template>
	<nav id="cartel-aprobado" class="responsive-height breadcrumb is-centered has-background-warning is-fixed-top" aria-label="cartel-pedido-aprobado" v-if="this.$root.pedido.aprobado">
		<div class="block mt-4 has-text-centered">
			<p class="has-text-danger">
			Tu pedido fue aprobado, <br class="responsive-line-break"> por lo que no puede ser modificado.
			</p>
		</div>
	</nav>
</template>

<script>
	export default {
		name: "NavCartelAprobado"
	}
</script>

<style>
#cartel-aprobado {
	top: 6rem
}

@media (min-width: 500px) {
 .responsive-line-break {
	display: none;
 }
}

@media (max-width: 499px) {
 .responsive-height {
	height: 4.5rem !important;
 }
}
</style>