@import 'ansyn/less/common';
@import 'ansyn/less/z-index-globals';

@title-color: #393b3f;
@authorizedBackground: #222223;
@background: #131518;
@border: #191b1c;
@border-radius: 15px;

:host {
	position: absolute;
	right: 0;
	top: @status-bar-height;
	width: 100vw;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.7);
	user-select: none;

	div.credentials {
		position: relative;
		top: 10%;
		width: 350px;
		height: 70%;
		margin: auto;
		align-self: center;
		border-color: @border;
		color: white;
		cursor: default;

		div.title {
			display: flex;
			background-color: @title-color;
			flex-direction: row;
			justify-content: space-between;
			padding: 10px;
			font-size: 20px;
			border-top-left-radius: @border-radius;
			border-top-right-radius: @border-radius;

			span {
				cursor: pointer;
			}
		}

		div.authorized, div.unauthorized {
			background-color: @background;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			padding: 5px;

			i {
				font-size: 30px;
			}

			i, span {
				margin: 10px;
			}
		}

		div.authorized {
			background-color: @authorizedBackground;
			padding-bottom: 25px;

			i {
				color: @application-primary-color;
			}
		}

		div.buttons {
			background-color: @background;
			display: flex;
			flex-direction: column;
			padding-top: 50px;
			justify-content: center;
			align-items: center;
			padding-bottom: 25px;

			span {
				margin: 5px;
				cursor: pointer;
			}

			span.ask-permission {
				color: @application-primary-color;
				border: 1px solid @application-primary-color;
				padding: 5px;

				&.disabled {
					opacity: 0.3;
					cursor: not-allowed;
					pointer-events: none;
				}
			}
		}

		div.guid {
			border-top: 1px solid @border;
			background-color: @background;
			display: flex;
			justify-content: flex-end;
			padding: 10px;
			border-bottom-left-radius: @border-radius;
			border-bottom-right-radius: @border-radius;

			span {
				margin-left: 5px;
				margin-right: 5px;
				cursor: pointer;

				i {
					font-size: 13px;
				}
			}
		}

		div.circles {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: center;

			p.circle {
				padding: 2px;
				background-color: #3a3a3c;
				border-radius: 5px;
				margin: 2px;
			}
		}
	}
}
