@base-background-color: #1c1c1c;

.field-preview {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 0 5px;

	&:not(.editable) {
		cursor: pointer;
	}

	& .preview-field-key {
		width: 100%;
		border-bottom: 1px solid #272727;
		font-weight: 100;
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		padding: 18px 10px;
		box-sizing: border-box;

		&.none {
			& span {
				color: #6f6f6f;
			}
		}

		&::before {
			content: "Key:";
			color: #e6e6e6;
			letter-spacing: 1px;
			margin-right: 15px;
			font-size: 13pt;
		}

		& input {
			background: transparent;
			border: 0;
			border-bottom: 1px solid #2f2f2f;
			font-size: 12pt;
			max-width: 150px;
			outline: none;
			color: #e6e6e6;
		}
	}

	&.hidden {
		& .preview-main-box {
			& span.label,
			& span.value {
				color: #757575;
			}

			& span.label {
				background-color: #2b2b2b;
			}

			& span.value {
				background-color: #21201e;
			}
		}
	}

	& .preview-main-box {
		display: flex;
		flex-direction: column;
		letter-spacing: 0.5px;
		text-transform: uppercase;
		margin: 20px auto 10px auto;
		max-width: 100%;

		&.align-right > * {
			text-align: right;
		}
		&.align-left > * {
			text-align: left;
		}
		&.align-center > * {
			text-align: center;
		}
		&.align-natural > * {
			text-align: start;
		}

		& span.label,
		& span.value {
			color: @base-background-color;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			flex-grow: 1;
			padding: 3px 6px;
		}

		& span.label {
			font-size: 11pt;
			background-color: #ffab00;
			border-radius: 2px 2px 0 0;
		}

		& span.value {
			font-size: 16pt;
			background-color: #ff830e;
			border-radius: 0 0 2px 2px;
		}
	}
}
