/*--------------------------------------------------*/
/*	OVERRIDE
/*--------------------------------------------------*/

.surface .content.card {
	border-top-left-radius: 15px;
	border-top-right-radius: 15px;
	border-bottom-left-radius: 15px;
	border-bottom-right-radius: 15px;
}

.surface.overlay {
	z-index: 1000;
}

/*--------------------------------------------------*/
/*	GENERAL
/*--------------------------------------------------*/

.surface {
	z-index: 4;
	position: fixed;

	top: 0;
	left: 0;

	width: 100vw;
	height: 100vh;

	overflow: visible;
}

.surface .content {
	width: 100vw;
	height: 100vh;

	overflow: hidden;
	background: var(--background);
	transition: transform 0.5s ease-out;
}

.surface .content iframe {
	width: 100%;
	height: 100%;
}

/*--------------------------------------------------*/
/*	OPTICAL LOAD_GUARD
/*--------------------------------------------------*/

.surface .load_guard {
	position: fixed;
	top: 0;
	left: 0;

	width: 100%;
	height: 100%;

	background: #40404080;

	/* Hidden initially */
	opacity: 0;
}

.surface.open .load_guard {
	opacity: 1;
}

/*--------------------------------------------------*/
/*	LOADING
/*--------------------------------------------------*/

.surface.loading .content:before {
	content: " ";

	z-index: 1;
	position: absolute;
	top: 0;
	left: 0;

	width: 100%;
	height: 100%;
}

.surface.loading .content > * {
	filter: blur(3px);
}

.surface.loading .content:after {
	content: " ";
	position: absolute;
	top: calc(50% - 64px);
	left: calc(50% - 64px);

	width: 128px;
	height: 128px;

	background-image: url("/content/svg/common/loading");
	background-repeat: no-repeat;

	background-position: center;
	background-size: contain;

	-webkit-animation: spin 1s linear infinite;
	   -moz-animation: spin 1s linear infinite;
		-ms-animation: spin 1s linear infinite;
		 -o-animation: spin 1s linear infinite;
			animation: spin 1s linear infinite;
}

@-webkit-keyframes spin {
	100% {
		-webkit-transform: rotate(359deg);
	}
}

@-ms-keyframes spin {
	100% {
		-ms-transform: rotate(359deg);
	}
}

@-moz-keyframes spin {
	100% {
		-moz-transform: rotate(359deg);
	}
}

@-o-keyframes spin {
	100% {
		-o-transform: rotate(359deg);
	}
}

@keyframes spin {
	100% {
		transform: rotate(359deg);
	}
}

/*--------------------------------------------------*/
/*	TYPES
/*--------------------------------------------------*/

.surface.modal,
.surface.page,
.surface.dialog,
.surface.sheet {
	z-index: 1000;
	position: fixed;
}

/* modal mode */
.surface.modal .content {
	position: absolute;
	top: 50%;
	left: 50%;

	width: calc(100vw - 30px);
	height: calc(100vh - 30px);
	max-width: 600px;

	transform: translate(-50%, -50%);
}

/*
.surface.modal .content,
.surface.modal[direction="right"] .content {
	transform: translate(-100vw, -50%);
}

.surface.modal .content,
.surface.modal[direction="left"] .content {
	transform: translate(100vw, -50%);
}

.surface.modal.open .content {
	transform: translate(-50%, -50%);
}
*/

/* dialog mode */
.surface.dialog .content {
	position: absolute;
	top: 50%;
	left: 50%;

	width: calc(100% - 30px);
	height: calc(100% - 30px);

	max-width: 500px;
/*
	max-height: 300px;
*/

	transform: translate(-50%, -50%);
}

/* sheet mode */
.surface.sheet .content {
	position: absolute;

	width: 100vw;
	height: 50vh;

	max-height: calc(100vh - 30px);
}

.surface.sheet[direction="right"] .content {
	bottom: 0;
	right: 0;
}

.surface.sheet[direction="right"] .content.card {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.surface.sheet[direction="left"] .content {
	bottom: 0;
	left: 0;
}

.surface.sheet[direction="left"] .content.card {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

.surface.sheet[direction="bottom"] .content {
	bottom: 0;
	left: 50%;

	transform: translateX(-50%);
}

.surface.sheet[direction="bottom"] .content.card {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

.surface.sheet[direction="top"] .content {
	top: 0;
	left: 50%;

	transform: translateX(-50%);
}

.surface.sheet[direction="top"] .content.card {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

/*--------------------------------------------------*/
/*	ANIMATIONS
/*--------------------------------------------------*/

.surface,
.surface[direction="right"] {
	top: 0;
	right: 0;

	transform: translate(100%, 0);
}

.surface.open,
.surface[direction="right"].open {
	transform: translate(0, 0);
}

.surface[direction="left"] {
	top: 0;
	left: 0;

	transform: translate(-100%, 0);
}

.surface[direction="left"].open {
	transform: translate(0, 0);
}

.surface[direction="bottom"] {
	bottom: -100%;
	left: 0;

	transform: translate(0, 100%);
}

.surface[direction="bottom"].open {
	transform: translate(0, 0);
}

.surface[direction="top"] {
	top: 0;
	left: 0;

	transform: translate(0, -100%);
}

.surface[direction="top"].open {
	transform: translate(0, 0);
}

/*--------------------------------------------------*/
/*	HANDLE
/*--------------------------------------------------*/

.surface .content .handle {
	cursor: grab;
	z-index: 2;
	position: absolute;

	display: block;
	background: transparent;
}

.surface[direction="right"] .content .handle,
.surface[direction="left"] .content .handle {
	width: 32px;
	height: calc(100% - 128px);

	margin: 64px 0;
}

.surface[direction="bottom"] .content .handle,
.surface[direction="top"] .content .handle {
	width: calc(100% - 128px);
	height: 32px;

	margin: 0 64px;
}

.surface[direction="right"] .content.dragged .handle,
.surface[direction="left"] .content.dragged .handle {
	width: 100%;
}

.surface[direction="bottom"] .content.dragged .handle,
.surface[direction="top"] .content.dragged .handle {
	height: 100%;
}

.surface[direction="right"] .content .handle {
	top: 0;
	left: 0;
}

.surface[direction="left"] .content .handle {
	top: 0;
	right: 0;
}

.surface[direction="bottom"] .content .handle {
	top: 0;
	left: 0;
}

.surface[direction="top"] .content .handle {
	bottom: 0;
	left: 0;
}

.surface .content .handle:after {
	content: " ";
	position: absolute;

	background: #40404080;
	border-radius: 2px;
}

.surface[direction="right"] .content .handle:after,
.surface[direction="left"] .content .handle:after {
	width: 4px;
	height: 64px;
}

.surface[direction="bottom"] .content .handle:after,
.surface[direction="top"] .content .handle:after {
	width: 64px;
	height: 4px;
}

.surface[direction="right"] .content .handle:after {
	top: calc(50% - 32px);
	right: 14px;
}

.surface[direction="left"] .content .handle:after {
	top: calc(50% - 32px);
	left: 14px;
}

.surface[direction="bottom"] .content .handle:after {
	top: 14px;
	left: calc(50% - 32px);
}

.surface[direction="top"] .content .handle:after {
	bottom: 14px;
	left: calc(50% - 32px);
}