@import '../variables';

.prototypo-word {
	height:100%;
	position:absolute;
	width:100%;

	&-string {
		font-size: 17rem;
		font-weight: normal;
		padding: 10px;
		text-align: center;
		outline: none;
		width:100%;
		height:100%;
		display:flex;
		justify-content:center;
		align-items:center;
		overflow:hidden;
		background: $white;
		color: $black;

		&.inverted {
			.letter-wrap-regular, .letter-wrap-letter {
				transform: scaleY(-1);
			}
		}

		&.negative {
			background: $black;

			.letter-wrap-regular, .letter-wrap-letter {
				color: $white;
			}
		}

		&.indiv {
			color: $medium-grey;
		}

		&.negative.indiv {
			color: $medium-grey;
		}

		&-indiv-character {
			color: $black;
		}

		&.negative &-indiv-character {
			color: $white;
		}
	}

	&-scrollbar-wrapper {
		height: calc(100% - 28px);
		position:relative;
	}
}
