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

.viewer {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-grow: 1;
	width: 100%;
	cursor: pointer;

	& > .pass {
		cursor: initial;

		& .card {
			box-shadow: 0px 3px 10px #212121;
		}

		&:hover {
			box-shadow: 0px 8px 10px 3px #212121;
		}
	}

	&.no-empty {
		& > .pass .empty-field {
			background-color: initial;
			pointer-events: none;
		}
	}

	& > .project-title-box {
		position: absolute;
		top: 30px;
		left: 30px;
		width: 200px;
		.lookMumIamAppearing(0.5s, ease-in-out, 2s);

		& input {
			width: 100%;
			font-size: 1.3em;
			background-color: transparent;
			border: none;
			outline: none;
			padding: 5px;
			color: #e6e6e6;
			box-sizing: border-box;

			&::selection {
				background-color: #1c1c1c;
				color: #e6e6e6;
			}
		}

		&::before {
			border-bottom: 0.5px solid #525252;
			width: 0px;
			content: "";
			position: absolute;
			height: 100%;
			pointer-events: none;
			transition: width 0.5s ease-in-out;
		}

		&:focus-within::before {
			width: 100%;
		}
	}
}
