@use "vars/vars-night";

@layer vetools {
	h4 {
		border-bottom: 1px solid #333;
		width: 100%;
	}

	.ve-night-mode h4 {
		border-bottom: 1px solid #555;
	}

	h5 {
		text-decoration: underline;
		margin-bottom: 3px;
	}

	.life__output-wrp-border {
		border-radius: 4px;
	}

	.wrp-sect-head {
		display: flex;
		justify-content: space-between;
	}

	.wrp-sect-head > button {
		margin: 6px 0 6px 6px;
	}

	.life__output {
		background: none;
	}

	.ve-btn-supp-fam {
		margin-top: 7px;
		margin-bottom: 7px;
		display: block;
	}

	.ve-btn-supp-fam::before {
		content: "Roll Supplemental Tables Details";
	}

	.note {
		display: inline-block;
		margin: 3px 10px;
		font-style: italic;
		user-select: none;
	}

	.life__output {
		margin: 1em 0;
		padding: 0.2em 0.7em;
		border-radius: 0.2em;
		display: none;
	}

	.life__output {
		background: #d3d3d3;
	}

	.life__output-wrp-border {
		border: 1px solid rgb(0 0 0 / 15%);
	}

	.ve-night-mode {
		.life__output {
			background: vars-night.$rgb-bg--night;
		}

		.life__output-wrp-border {
			border: 1px solid rgb(255 255 255 / 15%);
		}
	}
}
