// main: midgard5.less
@borderGroove: 2px groove #eeede0;
@attributeBorderColor: rgba(0, 0, 0, 0.5);

.midgard5 {
	.flexrow {
		align-items: center;
	}

	h3 {
		padding: 0.5rem 0.5rem 0.5rem 0.5rem;
		text-align: left;
		font-weight: bold;
		background-color: dimgray;
		color: white;
	}

	.sheet.character {
		form {
			display: flex;
			flex-direction: column;
		}

		.sheet-content {
			height: 100%;
			display: flex;
			flex-direction: column;

			.editor {
				height: 100%;
			}
		}

		.profile-img {
			max-width: 128px;
			height: 160px;
			border: 0px solid black;
		}

		.description {
			flex: 0 0 100%;
			margin: 0;
		}
	}

	.sheet-navigation {
		margin: 4px 0;
		background-color: lightgrey;
		border-top: 2px solid black;
		border-bottom: 2px solid black;
	}

	.sheet-navigation .item {
		padding: 8px 12px 8px 12px;
		color: black;
		font-weight: bold;
		font-size: large;
	}

	.sheet-navigation .active {
		background-color: darkgrey;
	}

	.level-display {
		text-align: right;
		font-weight: bold;
	}

	table {
		background-color: beige;
	}

	td,
	th {
		padding: 0 0.5rem 0 0.5rem;
		text-align: left;

		&.center {
			text-align: center;
		}

		&.fixed-value {
			width: 3rem;
			text-align: center;
		}

		&.attribute {
			text-align: center;
			font-weight: bold;
		}

		&.attribute-value {
			background: url(/icons/svg/d20-grey.svg) no-repeat;
			background-size: 50px 50px;
			background-position: center;
			color: black;
			text-align: center;
			font-weight: bold;
			height: 50px;
			width: 50px;
		}

		&.title {
			padding: 0.5rem 0.5rem 0.5rem 0.5rem;
			text-align: left;
			font-weight: bold;
			background-color: dimgray;
		}
	}

	input.skill {
		width: 5rem;
	}

	input.fixed {
		width: 5rem;
	}

	.new-skill {
		font-style: italic;
		background: rgba(0, 0, 0, 0.3);
		color: rgba(255, 255, 255);

		button {
			background: rgba(255, 255, 255, 0.5);
		}
	}

	button.roll-button {
		background: url(/icons/svg/d20-black.svg) no-repeat;
		background-size: 24px 24px;
		border: #000000 solid 0px;
		width: 26px;
		height: 26px;
	}

	span.spell-process {
		color: rgb(93, 93, 93);
		font-style: italic;
	}

	.filler {
		flex: 1 1 auto;
	}

	.health-bar {
		height: 1rem;
		background-color: rgba(0, 0, 0, 0.8);
		display: flex;
		flex-direction: row;
		gap: 1px;
		padding: 1px;
		//align-items: stretch;

		input {
			flex: 0 0 2rem;
			text-align: center;
			height: 100%;
			background-color: rgba(109, 108, 102, 1);
			color: rgba(255, 255, 255, 1);
			font-weight: bold;
			border-radius: 0;
		}

		.lp-bar-item-empty,
		.ap-bar-item-empty {
			flex-grow: 1;
			background-color: white;
		}

		.lp-bar-item {
			flex-grow: 1;
			background-color: lightgreen;
		}

		.ap-bar-item {
			flex-grow: 1;
			background-color: lightblue;
		}

		.negative-bar-item {
			flex-grow: 1;
			background-color: red;
		}
	}

	.attributes {
		padding: 0.5rem 0.5rem 0.5rem 0.5rem;
		display: flex;
		flex-direction: row;
		margin-bottom: 0.5rem;
		background-color: beige;

		.attribute {
			flex: 0 0 7rem;
			margin: 0;
			border: 1px solid @attributeBorderColor;
			//border-bottom: none;
			border-radius: 10;

			display: flex;
			flex-direction: column;

			.attribute-header {
				display: flex;
				align-items: center;
				text-align: center;
				justify-content: center;

				font-weight: bold;
				background-color: @attributeBorderColor;
				color: rgba(255, 255, 255, 1);

				//font-size: 1.0rem;
				height: 2.5rem;
			}

			.attribute-main {
				padding: 0.2rem;

				.attribute-main-value {
					text-align: center;
					vertical-align: middle;
					font-size: 2rem;
				}

				.attribute-main-bonus {
					text-align: center;
					vertical-align: middle;
					font-size: 1rem;
				}
			}

			.attribute-footer {
				display: flex;
				flex-direction: row;
				gap: 0.3rem;
				padding: 0.3rem;
				background-color: @attributeBorderColor;

				input {
					flex-grow: 1;
					text-align: center;
					background-color: rgba(255, 255, 255, 0.8);
				}
			}
		}
	}
}