@import "Theme.scss";

ReplayCodeDialog {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: all;
	z-index: 900;

	.shade {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		justify-content: center;
		align-items: center;
		background-color: rgba(0, 20, 22, 0.72);
	}

	.dialog {
		width: 760px;
		flex-direction: column;
		align-items: stretch;
		padding: 36px;
		background-color: #024a54;
		border: 6px solid $white;
		font-family: $font;
		font-smooth: never;
	}

	.title {
		justify-content: center;
		font-size: 48px;
		color: $white;
		text-shadow: 3px 3px 0 $black;
		margin-bottom: 24px;
	}

	.code-entry {
		height: 58px;
		padding: 10px 14px;
		align-items: center;
		background-color: rgba($black, 0.62);
		border: 3px solid rgba($white, 0.85);
		color: $white;
		font-family: $font-mono;
		font-size: 24px;
		caret-color: $white;
		white-space: nowrap;
		overflow: hidden;
		pointer-events: all;

		.content-label {
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		&:focus {
			border-color: #dddd99;
		}
	}

	.error {
		justify-content: center;
		margin-top: 16px;
		font-size: 24px;
		color: #ff9b9b;
	}

	.buttons {
		flex-direction: row;
		justify-content: flex-end;
		margin-top: 24px;

		button {
			min-width: 170px;
			height: 54px;
			justify-content: center;
			align-items: center;
			margin-left: 16px;
			font-size: 28px;
			color: $black;
			background-color: $white;
			cursor: blank-hand;
			pointer-events: all;

			&:hover { background-color: #dddd99; }

			&.cancel {
				background-color: #c98a8a;

				&:hover { background-color: #d99a9a; }
			}
		}
	}
}