.wpcb-configurator-gallery-actions {
	display: inline-flex;
	flex-direction: column;

	.wpcb-configurator-gallery-action-label {
		visibility: hidden;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		left: 0;
		white-space: nowrap;
		border: 1px solid $template_border;
		background-color: $template_accent;
		border-radius: 6px;
		padding: 5px;
		margin: 0;
		margin-left: 8px;
	}
	
	button {
		appearance: none;
		position: relative;
		display: inline-block;
		border: 1px solid $template_border;
		color: $template_color;
		background-color: $template_background;
		border-radius: 8px;
		padding: 12px;
		outline: 0;
		cursor: pointer;

		&:hover,
		&:focus {
			border-color: $button_border;
		}

		img {
			display: block;
			width: 24px;
			height: 24px;
		}

		.active {
			display: none;
		}

		@media (max-width: 991px) {
			&.show-qr-code {
				display: none;
			}
		}
	}

	button.active {
		.default {
			display: none;
		}
		.active {
			display: block;
		}
	}

	button:not(:first-child) {
		margin-top: 8px;
	}

	button:hover,
	button:focus {

		.wpcb-configurator-gallery-action-label {
			visibility: visible;
			left: 100%;
		}
	}

	&.wpcb-border-square {

		button,
		.wpcb-configurator-gallery-action-label {
			border-radius: 0;
		}
	}

	&.wpcb-border-pill {

		button {
			border-radius: 25px;
		}

		.wpcb-configurator-gallery-action-label {
			border-radius: 20px;
		}
	}

	&.wpcb-configurator-gallery-actions-right {

		.wpcb-configurator-gallery-action-label {
			left: auto;
			margin: 0;
			margin-right: 8px;
			right: 0;
		}

		button:hover,
		button:focus {
			.wpcb-configurator-gallery-action-label {
				right: 100%;
				left: auto;
			}
		}
	}
}

.wpcb-ios .wpcb-configurator-gallery-actions {
	@media (max-width: 991px) {
		button.fullscreen {
			display: none;
		}
	}
}
