<template>
	<div
		class="digit-box"
		:class="[
			value in '0123456789'.split('') ? 'digit' : 'zhHans',
			wider ? 'another-hw' : '',
		]"
	>
		{{ value }}
	</div>
</template>

<script>
export default {
	name: "DigitalBox",
	props: {
		value: {
			type: String,
			default: "0",
		},
		wider: {
			type: Boolean,
			default: false,
		},
	},
	data() {
		return {};
	},
};
</script>

<style scoped lang="scss">
@import "../../assets/styles/functions";

.digit-box {
	// height: h(80px);
	// width: w(64px);
	height: adjust(h(80px));
	width: adjust(w(56px));
	color: white;
	background: url(../../assets/digit.png) no-repeat;
	background-size: 100% 100%;
	padding: adjust(2px);
	text-align: center;
	user-select: none;
}

.digit {
	font-family: "zcoolqingkehuangyouti-Regular", sans-serif;
	font-size: adjust(32px);
	line-height: adjust(39px);
}

.zhHans {
	font-size: adjust(18px);
	line-height: adjust(48px);
}

.another-hw {
	height: adjust(h(72px));
	width: adjust(w(62px));
}

.another-hw.digit {
	font-size: adjust(32px);
	line-height: adjust(32px);
}
</style>
