@import (reference) "../../../../App/common.less";

.back-fields {
	.scrollableWithoutScrollbars(y);
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	background-color: #010101; /* Like Apple Wallet iOS 13 in dark mode */
	padding: 10px;
	border-radius: inherit;

	/* For backflip */
	transform: rotateY(180deg);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;

	display: flex;
	align-items: flex-start;

	& > .fields-row {
		flex-direction: column;
		width: 100%;
		min-height: initial;
		max-height: initial;
		margin-top: initial;
		justify-content: flex-start;
		height: 100%;

		/**
		 * If empty placeholder is shown we want to
		 * make the backfield to occupy the whole height
		 */
		& > .empty-field:only-child {
			background-color: #1c1c1e;

			&::before {
				content: "Set BackFields to make something to appear here like magic. ✨";
				display: flex;
				align-items: center;
				color: #9c9ba0;
				text-align: center;
				line-height: 25px;
				font-size: 14px;
				position: absolute;
				top: 0;
				right: 0;
				left: 0;
				bottom: 0;
				padding: 20px;
				pointer-events: none;
			}
		}

		& .field {
			padding: 7px 10px;
			background-color: #1c1c1e;

			&:first-child {
				border-radius: 7px 7px 0 0;
			}

			&:last-child {
				border-radius: 0 0 7px 7px;
			}

			&:not(:last-child) {
				border-bottom: 1px solid #323234;
			}

			& .label {
				min-height: 16px;
				color: #9c9ba0;
				text-transform: initial;
				padding-right: 7px;
				font-size: 8pt;
			}

			& .value {
				min-height: 16px;
				color: #9c9ba0;
				padding-right: 7px;
				white-space: pre-wrap; /* New lines, here I come! */
				font-size: 9pt;
			}
		}
	}
}
