@import 'variables';

.turtl-overlay {position: fixed; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; background: rgba(0, 0, 0, 0.7); .transition(opacity 0.3s);}
.turtl-overlay.closing {z-index: 19;}
.turtl-overlay.active {z-index: 19; opacity: 1; cursor: pointer;}
.turtl-overlay.active.unclickable {cursor: default; background-color: rgba(0, 0, 0, 0.9);}

.turtl-modal {position: fixed; top: 0; right: -100%; z-index: 20; width: 100%; height: 100%; overflow-x: hidden; background: @theme_gutter; .transition(right .3s); background: #fff; .layer-hover(); .touch-scroll();}
.turtl-modal.active {right: 0%;}
.turtl-modal {
	@media @desktop {
		& {width: @desktop_modal_width;}
		header {
			width: @desktop_modal_width;
			//ul.actions {left: (@desktop_modal_width - 55px);}
		}
		form.standard-form .button-row {width: @desktop_modal_width; right: 0; left: auto;}
	}
	header {background: @theme_black_bg;}
	header {
		a.logo {display: none;}
		h1 {margin-left: 10px;}
		h1 {
			em {
				a {color: #fff;}
				strong {font-weight: bold;}
				icon {color: #fff;}
			}
		}
		ul.actions {right: 10px;}
		ul.actions {
			> li {
				> a icon {color: #fff;}
				.item-actions {
					> a icon {color: #fff;}
				}
			}
		}
	}
	.modal-gutter {padding: @header_height 0 0 0;}
	.modal-gutter.closing {
		form.standard-form .button-row {display: none;}
	}
	form.standard-form {.uncard();}
	.interface {width: auto;}
}

