//
// Panel Footer
//

#elementor-panel-footer {
	position: relative;
	height: 40px;
	background-color: var(--e-a-dark-bg);
	color: var(--e-a-dark-color-txt);
}

#elementor-panel-footer-tools {
	display: flex;
	justify-content: space-between;
	height: 100%;
}

.elementor-panel-footer-tool {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 15%;
	cursor: pointer;
	transition: var(--e-a-transition-hover);
	border: 0;
	color: currentColor;
	background-color: transparent;

	i {
		font-size: 15px;
	}

	#elementor-panel-saver-button-save-options {

		i.eicon-chevron-right {
			margin: auto;
			transform: rotate(270deg);
		}

		&.elementor-disabled {
			cursor: inherit;
		}
	}

	&:not(.e-open) {

		&:hover,
		&:focus {
			color: var(--e-a-dark-color-txt-hover);
		}

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

#elementor-panel-footer-saver-publish {
	width: 30%;
	margin-inline-start: auto;

	.elementor-button-state {

		i {
			margin-inline-end: 0;
		}

		#elementor-panel-saver-button-publish-label {
			display: none;
		}
	}
}

#elementor-panel-footer-saver-options {
	width: 10%;

	.elementor-last-edited-wrapper {
		font-size: 11px;
		font-style: italic;
		padding: 5px 0 15px;

		&:not(.elementor-state-active) {

			.elementor-state-icon {
				display: none;
			}
		}

		time {
			border-block-end: 1px dotted transparent;
			transition: all ease-in-out .3s;
			cursor: pointer;

			&:hover {
				border-block-end-color: inherit;
			}
		}
	}


	&.e-open {

		i.eicon-chevron-right {
			transform: rotate(90deg);
		}
	}
}

#elementor-panel-saver- {

	&button-{

		&publish,
		&save-options {
			padding: 0;
			font-size: 11px;
			height: 100%;
			width: 100%;
			border-radius: 0;

			&.elementor-disabled {
				background-color: $e-gray-800;
				color: $e-gray-300;
			}
		}

		&publish {

			&:not(.elementor-disabled) {
				border-inline-end: 1px solid $e-pink-300;
			}

			&.elementor-disabled {
				border-inline-end: 1px solid $e-gray-700;
			}
		}
	}
}

.elementor-panel-footer-sub-menu-wrapper {
	position: absolute;
	inset-block-end: 100%;
	inset-inline-start: 0;
	width: 100%;
	background-color: $editor-darker;
	padding: 10px;
	box-shadow: $panel-top-shadow;
	cursor: default;
	z-index: $super-layer;
}

.elementor-panel-footer-sub-menu {
	border-radius: var(--e-border-radius);
	overflow: hidden;
	border: 1px solid $e-gray-700;
}

.elementor-panel-footer-sub-menu-item {
	display: flex;
	height: 40px;
	color: $e-gray-100;
	align-items: center;
	column-gap: 10px;
	padding: 0 20px;
	transition: var(--e-a-transition-hover);
	cursor: pointer;

	&.elementor-disabled {
		cursor: default;
		color: $e-gray-500;
	}

	&:not(:last-child) {
		border-block-end: 1px solid $e-gray-700;
	}

	&:hover {
		background-color: rgba(255, 255, 255, 0.1);
	}

	&.active {
		background-color: rgba(255, 255, 255, 0.2);
	}
}
