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

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

	h3 {
		margin-top: 1rem;
	}

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

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

			.editor {
				height: 100%;
			}
		}

		.profile-img {
			height: 64px;
			width: 64px;
		}

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

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

	td, th {
		padding: 0 0.5rem 0 0.5rem;

		&.center {
			text-align: center;
		}

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

	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;
		width: 26px;
		height: 26px;
	}

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

	.filler {
		flex: 1 1 auto;
	}

	.attributes {
		display: flex;
		flex-direction: row;
		margin-bottom: 0.5rem;

		.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);
				}
			}
		}
	}
}