<template>
	<div class="pause-container flex align-center">
		<SvgIcon name="exclamation" size="12" color="#FF7A51" />
		<span>Task has been stopped.</span>
	</div>
</template>

<script setup lang="ts"></script>

<style lang="less" scoped>
	.pause-container {
		position: relative;
		width: 100%;
		height: 3.6rem;
		line-height: 3.6rem;
		column-gap: 0.6rem;
		padding: 0 1.2rem;
		background-color: #fffcf4;
		border-radius: 0.4rem;
		margin-top: 1rem;
		color: #ff7a51;

		&::before {
			content: '';
			position: absolute;
			inset: 0;
			border-radius: inherit;
			padding: 0.1rem;
			background: linear-gradient(
				119.03deg,
				rgba(233, 121, 60, 0.3) 1.61%,
				rgba(255, 207, 144, 0.3) 101.01%
			);
			-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
			mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
			-webkit-mask-composite: xor;
			mask-composite: exclude;
		}

		.c-svg {
			width: initial;
			.svg-icon {
				width: 1.2rem;
				height: 1.2rem;
			}
		}
	}
</style>
