//
// Panel Footer
//

#qazana-panel-footer {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 40px;
	background-color: $editor-darkest;
}

#qazana-panel-footer-tools {
	display: table;
	table-layout: fixed;
	width: 100%;
	height: 100%;
}

.qazana-panel-footer-tool {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	cursor: pointer;
	color: $editor-light;
	transition: $transition-hover;

	&.qazana-open {
		color: #fff;
	}

	&:not(.qazana-open) {
		&:hover {
			color: $editor-lightest;
		}

		.qazana-panel-footer-sub-menu-wrapper {
			display: none;
		}
	}
}

.qazana-panel-footer-sub-menu-wrapper {
	position: absolute;
	bottom: 100%;
	left: 0;
	width: 100%;
	background-color: $editor-darker;
	padding: 10px;
	box-shadow: $panel-top-shadow;
	cursor: default;
}

.qazana-panel-footer-sub-menu {
	border-radius: 5px;
	overflow: hidden;
}

.qazana-panel-footer-sub-menu-item {
	background-color: $editor-darkest;
	display: table;
	table-layout: fixed;
	width: 100%;
	cursor: pointer;

	&:not(:last-child) {
		margin-bottom: 1px;
	}

	&[data-device-mode="mobile-landscape"] {
		.fa-mobile {
			transform: rotate(-90deg);
		}
	}

	&:hover {
		background-color: rgba(0, 0, 0, 0.2);
	}

	&.active {
		background-color: rgba(0, 0, 0, 0.3);
	}

	> * {
		display: table-cell;
		height: 40px;
		vertical-align: middle;
	}

	.qazana-icon {
		width: 40px;
		color: $editor-light;
	}

	.qazana-title {
		text-align: $start;
		color: $editor-lightest;
	}

	.qazana-description {
		width: 95px;
		text-align: $start;
		font-size: 11px;
		font-style: italic;
		color: $editor-light;
	}
}

#qazana-panel-footer-help-title {
	text-align: $start;
	padding: 10px 0;
	color: $editor-lightest;
}

#qazana-panel-footer-save {
	width: 130px;
	padding: 0 10px;

	.qazana-button {
		font-size: 11px;
		text-transform: uppercase;
		width: 100%;
		height: 26px;
		background: #0085ba;
		border-color: #0073aa #006799 #006799;
		box-shadow: 0 1px 0 #006799;
		color: #fff;
		text-decoration: none;
		text-shadow: 0 -1px 1px #006799, 1px 0 1px #006799, 0 1px 1px #006799, -1px 0 1px #006799;
	}

	&.qazana-save-active {
		.qazana-button {
			@extend .qazana-button-success;
			text-shadow: none;
		}
	}
}

#qazana-panel-footer-publish {
	.qazana-icon,
	.qazana-title {
		color: $editor-success;
	}
}

#qazana-panel-footer-discard {
	.qazana-icon,
	.qazana-title {
		color: $editor-warning;
	}
}
