/**
 * Dialog Style Sheet
 *
 * Copyright (c) 2017. by Way2CU
 * Author: Mladen Mijatov
 */

/**
 * Animations
 */
@keyframes open {
	0% { transform: translateX(-50%) perspective(1000px) rotate3d(1, 0, 0, 90deg); }
	100% { transform: translateX(-50%) perspective(1000px) rotate3d(1, 0, 0, 0deg); }
}

@keyframes close {
	0% { transform: translateX(-50%) perspective(1000px) rotate3d(1, 0, 0, 0deg); }
	100% { transform: translateX(-50%) perspective(1000px) rotate3d(1, 0, 0, 90deg); }
}

div.dialog-background {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;

	opacity: 0;
	background-color: #303030;
	transition: opacity 0.3s;
	transition-delay: 0.3s;
	pointer-events: none;
	will-change: opacity;
	z-index: 100000;
}

div.dialog-background.visible {
	opacity: 0.9;
	pointer-events: auto;
	transition-delay: 0s;
}

div.dialog {
	position: fixed;
	top: 0;
	left: 50%;
	min-width: 250px;
	max-width: 500px;

	background-color: white;
	color: #333333;

	animation-fill-mode: forwards;
	animation-timing-function: ease-in-out;
	animation-duration: 0.3s;
	transform-origin: 50% 0%;
	transform: translateX(-50%) perspective(1000px) rotate3d(1, 0, 0, 90deg);
	pointer-events: none;
	z-index: 100001;
}

div.dialog.visible {
	animation-name: open;
	pointer-events: auto;
}

div.dialog.active:not(.visible) {
	animation-name: close;
	pointer-events: none;
}

/**
 * Content style
 */
div.dialog div.title {
	display: block;
	padding: 0.5rem;
	padding-left: 0.6rem;
	padding-right: 0.6rem;

	background-color: #3e8df3;

	color: white;
	font-size: 1.5em;
	font-weight: 700;
	overflow: hidden;
}

div.dialog.error div.title {
	background-color: #df3434;
}

div.dialog div.content {
	position: relative;
	padding: 0.5rem;
	padding-left: 0.6rem;
	padding-right: 0.6rem;
}

div.dialog div.command_bar {
	display: block;
	padding-top: 0.5rem;
	text-align: center;
}

div.dialog div.command_bar a {
	display: inline-block;
	margin-left: 3px;
	margin-right: 3px;
	padding: 0.4em;
	padding-left: 0.6em;
	padding-right: 0.6em;

	background-color: #a0a0a0;

	color: white;
	font-size: 1.1em;
	text-decoration: none;

	transition: all 0.3s;
}

div.dialog div.command_bar a:hover {
	background-color: #d0d0d0;
}

div.dialog div.content {
	overflow: hidden;
}

div.dialog div.content div.scrollbar_thumb {
	display: none;
}

div.dialog div.content.scroll div.scrollbar_thumb {
	display: block;
}