#attribute {
	.scroll-inner {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.counter {
		margin-top: 10px;
		text-align: center;
	}

	.main, .calculated, .permanent {
		display: flex;

		.number-box {
			top: 70px;
			right: -6px;
			width: 24px;
			z-index: 2;

			+ .btn-round {
				margin-top: 8px;
			}
		}
	}

	.main {
		justify-content: center;
		padding-bottom: 16px;
		// border-bottom: 1px solid transparentize(white, .925);
	}

	.calculated {
		.value {
			background: transparent;
		}

		.number-box {
			width: 40px;
		}
	}

	.short {
		font: bold 14px/28px Alegreya;
		color: var(--headings-color);
		letter-spacing: 0.05em;
		text-align: center;
	}

	.attr .value {
		border: 2px solid transparent;
		padding: 2px;
	}

	.attribute-adjustment {
		margin: 10px 0 20px;
		display: flex;
		justify-content: center;
		align-items: center;

		> span::after {
			content: ":";
		}

		> .dropdown {
			margin: 0 0 0 16px;
			width: 200px;
		}
	}

	.value-inner {
		border: 1px solid var(--separator-color-transparent);
		padding: 1px;

		> div {
      width: 45px;
      height: 45px;
			text-align: center;
			font: bold 28px/45px Alegreya Sans;
			font-variant-numeric: lining-nums;
			color: var(--headings-color);
			letter-spacing: 0.05em;
			text-transform: uppercase;
			overflow: hidden;
		}
	}

	.btn-round {
		margin-top: 5px;
	}

	.attr {
		margin: 10px;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		flex: none;
		position: relative;

		&.ATTR_1 > .value {
			border-color: var(--courage-color);
		}

		&.ATTR_2 > .value {
			border-color: var(--sagacity-color);
		}

		&.ATTR_3 > .value {
			border-color: var(--intuition-color);
		}

		&.ATTR_4 > .value {
			border-color: var(--charisma-color);
		}

		&.ATTR_5 > .value {
			border-color: var(--dexterity-color);
		}

		&.ATTR_6 > .value {
			border-color: var(--agility-color);
		}

		&.ATTR_7 > .value {
			border-color: var(--constitution-color);
		}

		&.ATTR_8 > .value {
			border-color: var(--strength-color);
		}
	}

	.permanent {
		.value-inner > div {
			height: 23px;
			line-height: 23px;
			font-size: 14px;
		}

		.number-box {
			top: 20px;
		}

		.placeholder {
			width: 77px;
		}
	}
}

.overlay > .calc-attr-overlay {
	width: 280px;

	p.calc-text {
		font-style: italic;
	}
}

.permanent-points-editor {
	.modal-header {
		padding: 16px 0;

		.modal-header-inner {
			font-size: 16px;
			text-align: center;
		}
	}

	.main {
		display: flex;
	}

	.column {
		flex: 1 1 50%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		position: relative;
		padding-bottom: 10px;

		&:nth-child(2) {
			margin-left: 1px;

			&::before {
				content: "";
				position: absolute;
				height: 100%;
				width: 1px;
				background: var(--separator-color-transparent);
				left: -1px;
			}
		}
	}

	.value {
		font: bold 40px/1 Alegreya;
		color: var(--headings-color);
	}

	.description {
		margin: 20px 0;
	}

	.buttons {
		display: flex;

		.remove {
			margin-left: 20px;
		}
	}
}
