<div id="app">

	<span>
		<!-- Empty span here to make the grid line up properly --></span>

	<div class="card">
		<div class="flex-group">
			<input v-model="ml" type="number" id="ml">
			<label for="ml">
				ml
			</label>
		</div>
	</div>

	<span> = </span>

	<div class="card">
		<div class="flex-group">
			<input v-model="tsp" type="number" id="tsp">
			<label for="tsp">
				tsp
			</label>
		</div>
	</div>

	<span> = </span>

	<div class="card">
		<div class="flex-group">
			<input v-model="tbsp" type="number" id="tbsp">
			<label for="tbsp">
				tbsp
			</label>
		</div>
	</div>

	<span> = </span>

	<div class="card">
		<div class="flex-group">
			<input v-model="ounce" type="number" id="oz">
			<label for="oz">
				oz
			</label>
		</div>
	</div>

	<span> = </span>

	<div class="card">
		<div class="flex-group">
			<input v-model="cup" type="number" id="cup">
			<label for="cup">
				cup{{ cup != 1 ? 's' : '' }}
			</label>
		</div>
	</div>

	<span> = </span>

	<div class="card">
		<div class="flex-group">
			<input v-model="pint" type="number" id="pint">
			<label for="pint">
				pint{{ pint != 1 ? 's' : '' }}

			</label>
		</div>
	</div>

	<span> = </span>

	<div class="card">
		<div class="flex-group">
			<input v-model="quart" type="number" id="quart">
			<label for="quart">
				quart{{ quart != 1 ? 's' : '' }}
			</label>
		</div>
	</div>

	<span> = </span>

	<div class="card">
		<div class="flex-group">
			<input v-model="liter" type="number" id="liter">
			<label for="liter">
				liter{{ liter != 1 ? 's' : '' }}
			</label>
		</div>
	</div>

	<span> = </span>

	<div class="card">
		<div class="flex-group">
			<input v-model="gallon" type="number" id="gallon">
			<label for="gallon">
				gallon{{ gallon != 1 ? 's' : '' }}
			</label>
		</div>
	</div>

@import url("https://fonts.googleapis.com/css?family=Barlow+Condensed:300&display=swap");
@import url("https://fonts.googleapis.com/css?family=Martel&display=swap");
// Wanted to use a font with oldstyle figures for numbers. Most Google fonts don't have that option, but Martel has it built-in as its default.

$orange: #ff6a13;
$yellow: #ffd100;
$lightGray: #a7a8aa;
$darkGray: #53565a;
$lightBlue: #7ba7bc;

*,
*:before,
*:after {
	box-sizing: border-box;
	font-family: inherit;
	color: inherit;
	max-width: 100%;
}

*:focus {
	outline: none;
	background-color: $yellow;
}

*::selection {
	background: $yellow;
}

html {
	font-size: 1.125em;
}

body {
	margin: 0;
	font-family: "Barlow Condensed";
	background: #eee;
	color: $darkGray;
	min-height: 100vh;
	display: grid;
	place-content: center;
}

#app {
	display: grid;
	margin: auto;
	max-width: 24rem;
	grid-template-columns: 0.8rem minmax(12rem, 20rem);
	grid-gap: 1rem;
	padding: 1rem;

	@media (min-width: 800px) {
		transform: skewX(29deg);

		span,
		.card {
			transform: skewX(-29deg);
		}
	}

	span {
		text-align: center;
		font-size: 1.25rem;
		display: flex;
		align-items: center;
		color: $lightGray;
		margin-bottom: 0.3em;
		left: 0;
	}

	.card {
		display: grid;
		border-radius: 0.25rem;
		align-items: center;

		h2 {
			font-size: 2rem;
			font-weight: bold;
			text-align: center;
			margin: 0 0 1em;
		}

		.flex-group {
			display: grid;
			align-items: baseline;
			justify-content: space-between;
			grid-template-columns: 1fr max-content;
			grid-template-rows: 1fr;
			border-bottom: 1px solid;

			label {
				text-align: right;
				font-size: 1.25rem;
				position: relative;
			}

			input {
				font-family: "Martel";
				border: none;
				text-align: left;
				display: inline-block;
				font-size: 1.25rem;
				background: transparent;
				width: 60vw;
				box-shadow: none;

				@media (min-width: 440px) {
					width: auto;
				}

				&:focus + label {
					color: $yellow;
				}
			}
		}
	}
}

const app = new Vue({
	el: "#app",
	data: () => ({
		//Ounces are the only true data value here; every other value is a dependent computed property that multiplies or divides ounces
		oz: 32
	}),

	methods: {
		//Does some nice formatting on the number, if it's a decimal, to make it a little more readable and limit it to 10 total characters
		format(num) {
			num = Number(num);
			return parseInt(num) === num ? num : num.toString().substring(0, 10);
		}
	},

	computed: {
		tsp: {
			get() {
				return this.format(this.oz * 6);
			},
			set(val) {
				this.oz = val / 6;
			}
		},
		ml: {
			get() {
				return parseInt(this.format(this.oz * 29.57352968750042));
			},
			set(val) {
				this.oz = val / 29.57352968750042;
			}
		},
		tbsp: {
			get() {
				return this.format(this.oz * 2);
			},
			set(val) {
				this.oz = val / 2;
			}
		},
		ounce: {
			get() {
				return this.format(this.oz);
			},
			set(val) {
				this.oz = val;
			}
		},
		cup: {
			get() {
				return this.format(this.oz / 8);
			},
			set(val) {
				this.oz = val * 8;
			}
		},
		pint: {
			get() {
				return this.format(this.oz / 16);
			},
			set(val) {
				this.oz = val * 16;
			}
		},
		quart: {
			get() {
				return this.format(this.oz / 32);
			},
			set(val) {
				this.oz = val * 32;
			}
		},
		liter: {
			get() {
				return Number(this.format(this.oz * 0.02957352968750042)).toFixed(2);
			},
			set(val) {
				this.oz = val / 0.02957352968750042;
			}
		},
		gallon: {
			get() {
				return this.format(this.oz / 128);
			},
			set(val) {
				this.oz = val * 128;
			}
		}
	}
});