/*
 * Miva Merchant
 *
 * This file and the source codes contained herein are the property of
 * Miva, Inc.  Use of this file is restricted to the specific terms and
 * conditions in the License Agreement associated with this file.  Distribution
 * of this file or portions of this file for uses not covered by the License
 * Agreement is not allowed without a written agreement signed by an officer of
 * Miva, Inc.
 *
 * Copyright 1998-2026 Miva, Inc.  All rights reserved.
 * http://www.miva.com
 *
 */

.mm_runtimebranchpreview
{
	position: fixed;
	font-family: 'Geist', sans-serif;
	box-sizing: border-box;
	z-index: 2147483645;

	&.top_left
	{
		top: 15px;
		left: 15px;
	}

	&.top_right
	{
		top: 15px;
		right: 15px;
	}

	&.bottom_right
	{
		right: 15px;
		bottom: 15px;
	}

	&.bottom_left
	{
		bottom: 15px;
		left: 15px;
	}

	mm-icon
	{
		position: relative;
		display: inline-flex;
		padding: var(--mm-icon-padding);
		background-color: var(--mm-icon-background-color);
		border-radius: var(--mm-icon-border-radius);
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		overflow: hidden;
		transition: background-color 0.15s linear;

		&:where([type="legacy"])
		{
			color: var(--mm-icon-color);
			font-size: var(--mm-icon-dimension--width);
			line-height: 1;
			text-align: center;
			font-style: normal;
			font-weight: normal;
			font-variant: normal;
			text-transform: none;
			text-decoration: none;
			font-family: 'MivaIcons';
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
			transition: color 0.15s linear;
		}

		svg
		{
			width: var(--mm-icon-dimension--width);
			height: var(--mm-icon-dimension--height);

			.mm10_svg_icon_color
			{
				fill: var(--mm-icon-color);
				transition: fill 0.15s linear;
			}
		}
	}

	mm-text
	{
		position: relative;
		display: inline-block;
		margin-top: var(--mm-text-margin-top);
		margin-bottom: var(--mm-text-margin-bottom);
		color: var(--mm-text-color);
		font-family: var(--mm-text-font-family);
		font-size: var(--mm-text-font-size);
		font-style: var(--mm-text-font-style);
		font-weight: var(--mm-text-font-weight);
		line-height: var(--mm-text-line-height);
		letter-spacing: var(--mm-text-letter-spacing);
		white-space: normal;
		word-break: break-word;
		transition: color 0.15s linear;
		outline: none;

		&:where([size="full"])
		{
			display: block;
			flex-grow: 1;
		}

		&:where([nowrap])
		{
			padding: 1px 0;
			white-space: nowrap;
			word-break: normal;
			overflow: hidden;
			text-overflow: ellipsis;
			line-height: 1;
		}
	}

	.mm_runtimebranchpreview_button
	{
		--mm-runtimebranchpreview-button-outline: none;
		--mm-runtimebranchpreview-button-outline--focus: var(--mm-button-outline-width) var(--mm-button-outline-style) var(--mm-color-primary-200);
		--mm-runtimebranchpreview-button-outline-offset: var(--mm-button-outline-offset);

		position: relative;
		display: inline-flex;
		vertical-align: middle;
		padding: 0 32px 0 12px;
		height: 32px;
		line-height: 1;
		text-decoration: none !important;
		background-color: rgba(255, 255, 255, 0.9);
		border: 1px solid var(--mm-color-300);
		border-radius: var(--mm-corner-radius--xl);
		box-shadow: var(--mm-drop-shadow--m);
		align-items: center;
		justify-content: center;
		transition: background-color 0.2s linear, border-color 0.2s linear, box-shadow 0.2s linear;
		box-sizing: border-box;
		cursor: pointer;
		outline: var(--mm-runtimebranchpreview-button-outline) !important;
		outline-offset: var(--mm-runtimebranchpreview-button-outline-offset) !important;
		user-select: none;

		.mm_runtimebranchpreview.future &
		{
			border: 1px solid var(--mm-color-primary-500);
		}

		.mm9_button_image,
		.mm9_button_text,
		.mm9_button_title,
		.mm9_button_title_tooltip,
		.mm9_button_error_icon
		{
			display: none;
		}

		.mm9_button_custom
		{
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			column-gap: 8px;

			.mm_runtimebranchpreview_button_swatch
			{
				position: relative;
				display: inline-block;
				width: 16px;
				height: 16px;
				border-radius: 50%;
				border: 3px solid rgba(255, 255, 255, 0.6);
				flex-shrink: 0;
				box-sizing: border-box;
			}

			.mm_runtimebranchpreview_button_text
			{
				position: relative;
				display: inline-block;
				padding: 1px 0;
				max-width: 75px;
				color: var(--mm-color-500);
				font-size: 10px;
				font-weight: 500;
				line-height: 1;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				transition: color 0.2s linear;
				flex-grow: 1;
			}
		}

		.mm9_menubutton_dropdown
		{
			position: absolute;
			display: block;
			top: 50%;
			right: 14px;
			width: 9px;
			height: 6px;
			border: 0;
			background: none;
			transform: translateY(-50%);

			.mm9_menubutton_dropdown_bg1
			{
				position: absolute;
				top: 2px;
				left: 3px;
				width: 6px;
				height: 2px;
				background-color: var(--mm-color-500);
				border-radius: 1px;
				transform: rotate(-40deg);
				transition: all 0.2s linear;

				.mm_runtimebranchpreview.active &
				{
					transform: rotate(40deg);
				}
			}

			.mm9_menubutton_dropdown_bg2
			{
				position: absolute;
				top: 2px;
				left: 0px;
				width: 6px;
				height: 2px;
				background-color: var(--mm-color-500);
				border-radius: 1px;
				transform: rotate(40deg);
				transition: all 0.2s linear;

				.mm_runtimebranchpreview.active &
				{
					transform: rotate(-40deg);
				}
			}
		}

		&.focus:not(.click-focus)
		{
			--mm-runtimebranchpreview-button-outline: var(--mm-runtimebranchpreview-button-outline--focus);
		}
	}

	.mm_runtimebranchpreview_menu
	{
		position: absolute;
		display: none;
		margin: 0;
		padding: 0 0 10px;
		min-width: 350px;
		flex-direction: column;
		text-align: left;
		background: var(--mm-menubutton-common-menu-background-color);
		border: var(--mm-menubutton-common-menu-border);
		border-radius: var(--mm-menubutton-common-menu-border-radius);
		box-shadow: var(--mm-menubutton-common-menu-shadow);
		box-sizing: border-box;
		overflow: auto;
		pointer-events: auto;
		z-index: 99999;

		.mm_runtimebranchpreview.top_left &
		{
			top: 45px;
			left: 0;
		}

		.mm_runtimebranchpreview.top_right &
		{
			top: 45px;
			right: 0;
		}

		.mm_runtimebranchpreview.bottom_right &
		{
			right: 0;
			bottom: 45px;
		}

		.mm_runtimebranchpreview.bottom_left &
		{
			bottom: 45px;
			left: 0;
		}

		.mm9_menubutton_menu_item
		{
			position: relative;
			display: flex;
			height: var(--mm-menubutton-common-menu-item-height);
			margin: 0 8px;
			padding: 0 12px;
			align-items: center;
			white-space: nowrap;
			text-align: left;
			font-weight: var(--mm-menubutton-common-menu-item-font-weight);
			font-size: var(--mm-menubutton-common-menu-item-font-size);
			letter-spacing: var(--mm-field-letter-spacing);
			line-height: var(--mm-menubutton-common-menu-item-line-height);
			color: var(--mm-menubutton-common-menu-item-text-color);
			background-color: var(--mm-menubutton-common-menu-item-background-color);
			border-radius: var(--mm-menubutton-common-menu-item-border-radius);
			cursor: pointer;

			&.mm10_menubutton_menu_item_persistent_selected
			{
				--mm-menubutton-common-menu-item-text-color: var(--mm-menubutton-common-menu-item-text-color--selected);
				--mm-menubutton-common-menu-item-background-color: var(--mm-menubutton-common-menu-item-background-color--selected);
			}

			&.mm9_menubutton_menu_item_selected
			{
				--mm-menubutton-common-menu-item-text-color: var(--mm-menubutton-common-menu-item-text-color--active);
				--mm-menubutton-common-menu-item-background-color: var(--mm-menubutton-common-menu-item-background-color--active);
			}

			&.mm9_menubutton_menu_item_selected.negative
			{
				--mm-menubutton-common-menu-item-text-color: var(--mm-menubutton-common-menu-item-text-color-destructive--active);
				--mm-menubutton-common-menu-item-background-color: var(--mm-menubutton-common-menu-item-background-color-destructive--active);
			}

			&.mm9_menubutton_menu_item_disabled
			{
				--mm-menubutton-common-menu-item-text-color: var(--mm-menubutton-common-menu-item-text-color--disabled);
				--mm-menubutton-common-menu-item-background-color: var(--mm-menubutton-common-menu-item-background-color--disabled);

				cursor: default;
			}

			.mm_menubutton_menu_item_content
			{
				position: relative;
				display: inline-flex;
				align-items: center;
				justify-content: space-between;
				column-gap: 8px;
				flex-grow: 1;

				mm-text
				{
					--mm-text-line-height: var(--mm-menubutton-common-menu-item-line-height);
					--mm-text-color: var(--mm-menubutton-common-menu-item-text-color);
					--mm-text-font-size: var(--mm-menubutton-common-menu-item-font-size);
					--mm-text-font-weight: var(--mm-menubutton-common-menu-item-font-weight);

					flex-grow: 1;
				}

				mm-icon[data-icon-selected]
				{
					display: none;
				}
			}

			mm-text
			{
				--mm-text-color: var(--mm-menubutton-common-menu-item-text-color);
			}

			mm-icon
			{
				--mm-icon-color: var(--mm-menubutton-common-menu-item-text-color);
			}
		}

		.mm9_menubutton_menu_divider
		{
			position: relative;
			display: block;
			margin: 8px 20px;
			height: 1px;
			background-color: var(--mm-menubutton-common-menu-item-divider-color);
			border: none;
		}

		.mm10_menubutton_menu_group_container_hidden
		{
			display: none;
		}

		.mm_runtimebranchpreview_menu_header_branch,
		.mm_runtimebranchpreview_menu_header_copy,
		.mm_runtimebranchpreview_menu_header_title,
		.mm_runtimebranchpreview_menu_preview_time_indicator,
		.mm_runtimebranchpreview_menu_preview_time_display
		{
			cursor: default;

			&.mm9_menubutton_menu_item_selected,
			&.mm9_menubutton_menu_item_disabled
			{
				--mm-menubutton-common-menu-item-text-color: var(--mm-menubutton-common-menu-item-text-color--default);
				--mm-menubutton-common-menu-item-background-color: var(--mm-menubutton-common-menu-item-background-color--default);
			}
		}

		.mm_runtimebranchpreview_menu_progressbar
		{
			position: absolute;
			display: none;
			top: 0;
			right: -2px;
			left: -2px;
			height: 2px;
			overflow: hidden;
			z-index: 1;

			.mm_runtimebranchpreview_menu_branches_loading &
			{
				display: block;
			}

			.mm_runtimebranchpreview_menu_progressbar_progress
			{
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				background-color: transparent;
				border-radius: 2px;
				overflow: hidden;

				&::before
				{
					position: absolute;
					top: 0;
					left: 0;
					bottom: 0;
					background-color: var(--mm-color-success-500);
					animation: mm_runtimebranchpreview_menu_progressbar_animation 1.5s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
					content: '';
				}

				&::after
				{
					position: absolute;
					top: 0;
					left: 0;
					bottom: 0;
					background-color: var(--mm-color-success-500);
					animation: mm_runtimebranchpreview_menu_progressbar_animation_short 1.5s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
					animation-delay: 0.9s;
					content: '';
				}
			}
		}

		.mm_runtimebranchpreview_menu_header_group
		{
			position: relative;
			display: block;
			padding: 12px 0 0;
		}

		.mm_runtimebranchpreview_menu_header_position
		{
			position: absolute;
			top: 8px;
			right: 11px;
			z-index: 1;

			.mm10_menubutton_menu_group_menuitem_container
			{
				position: absolute;
				top: 0;
				right: 24px;
				height: 24px;
				white-space: nowrap;
			}

			&.mm10_menubutton_menu_collapsible_group_container:not(.mm10_menubutton_menu_collapsible_group_visible) > .mm10_menubutton_menu_group_menuitem_container
			{
				display: none;
			}

			.mm9_menubutton_menu_item
			{
				margin: 0;
				padding: 0;
				height: auto;
				cursor: pointer;

				&.mm9_menubutton_menu_item_selected
				{
					--mm-menubutton-common-menu-item-text-color: var(--mm-menubutton-common-menu-item-text-color--active);
					--mm-menubutton-common-menu-item-background-color: var(--mm-menubutton-common-menu-item-background-color--default);
				}
			}

			& > .mm10_menubutton_menu_group_menuitem_container > .mm9_menubutton_menu_item
			{
				position: relative;
				display: inline-block;
				margin-right: 8px;
				width: 24px;
				height: 24px;
			}

			.mm_runtimebranchpreview_menu_header_position1,
			.mm_runtimebranchpreview_menu_header_position2,
			.mm_runtimebranchpreview_menu_header_position3,
			.mm_runtimebranchpreview_menu_header_position4
			{
				position: relative;
				display: inline-block;
				padding: 4px;
				width: 24px;
				height: 24px;
				font-size: 16px;
				color: var(--mm-menubutton-common-menu-item-text-color);
				line-height: 1;
				text-align: center;
				font-style: normal !important;
				font-weight: normal !important;
				font-variant: normal !important;
				text-transform: none !important;
				text-decoration: none !important;
				font-family: "MivaIcons" !important;
				border-radius: var(--mm-menubutton-common-menu-border-radius);
				box-sizing: border-box;
				-webkit-font-smoothing: antialiased;
				-moz-osx-font-smoothing: grayscale;

				&.mm_runtimebranchpreview_menu_header_position1::before
				{
					content: '\e091';
				}

				&.mm_runtimebranchpreview_menu_header_position2::before
				{
					content: '\e090';
				}

				&.mm_runtimebranchpreview_menu_header_position3::before
				{
					content: '\e08f';
				}

				&.mm_runtimebranchpreview_menu_header_position4::before
				{
					content: '\e08e';
				}

				.mm_runtimebranchpreview_menu_header_position.mm10_menubutton_menu_collapsible_group_expanded .mm10_menubutton_menu_group_header_container &,
				.mm_runtimebranchpreview_menu_header_position > .mm10_menubutton_menu_group_menuitem_container > .mm9_menubutton_menu_item.mm9_menubutton_menu_item_selected &
				{
					--mm-menubutton-common-menu-item-text-color: var(--mm-menubutton-common-menu-item-text-color--active);
					--mm-menubutton-common-menu-item-background-color: var(--mm-menubutton-common-menu-item-background-color--active);
				}
			}
		}

		.mm_runtimebranchpreview_menu_header_copy_toggle
		{
			position: absolute;
			top: 8px;
			right: 40px;
			margin: 0;
			padding: 0;
			height: auto;
			cursor: pointer;
			z-index: 1;

			&.mm9_menubutton_menu_item_selected
			{
				--mm-menubutton-common-menu-item-text-color: var(--mm-menubutton-common-menu-item-text-color--active);
				--mm-menubutton-common-menu-item-background-color: var(--mm-menubutton-common-menu-item-background-color--default);
			}

			.mm_runtimebranchpreview_menu_header_copy_toggle_icon
			{
				position: relative;
				display: inline-block;
				padding: 4px;
				width: 24px;
				height: 24px;
				font-size: 16px;
				color: var(--mm-menubutton-common-menu-item-text-color);
				line-height: 1;
				text-align: center;
				font-style: normal !important;
				font-weight: normal !important;
				font-variant: normal !important;
				text-transform: none !important;
				text-decoration: none !important;
				font-family: "MivaIcons" !important;
				border-radius: var(--mm-menubutton-common-menu-border-radius);
				box-sizing: border-box;
				-webkit-font-smoothing: antialiased;
				-moz-osx-font-smoothing: grayscale;

				&.mm_runtimebranchpreview_menu_header_copy_toggle_icon::before
				{
					content: '\e096';
				}

				.mm_runtimebranchpreview_menu_branches_copy_visible &,
				.mm_runtimebranchpreview_menu_header_copy_toggle.mm9_menubutton_menu_item_selected.mm9_menubutton_menu_item_selected &
				{
					--mm-menubutton-common-menu-item-text-color: var(--mm-menubutton-common-menu-item-text-color--active);
					--mm-menubutton-common-menu-item-background-color: var(--mm-menubutton-common-menu-item-background-color--active);
				}
			}
		}

		.mm_runtimebranchpreview_menu_header_copy
		{
			display: none;
			margin-top: 8px;
			margin-bottom: 12px;

			.mm_runtimebranchpreview_menu_branches_copy_visible &
			{
				display: flex;
			}

			.mm_runtimebranchpreview_menu_header_copy_input
			{
				display: inline-flex;
				padding: var(--mm-field-input-padding);
				width: 100%;
				height: var(--mm-field-input-height);
				color: var(--mm-field-input-text-color);
				background: var(--mm-field-input-background-color);
				font-family: var(--mm-field-font-family);
				font-size: var(--mm-field-font-size);
				font-style: var(--mm-field-font-style);
				font-weight: var(--mm-field-font-weight);
				line-height: var(--mm-field-line-height);
				letter-spacing: var(--mm-field-letter-spacing);
				border: var(--mm-field-input-border);
				border-radius: var(--mm-field-input-border-radius);
				box-shadow: var(--mm-field-input-shadow);
				box-sizing: border-box;
				outline: none;

				&:focus
				{
					--mm-field-input-border: var(--mm-field-input-border--focus);
					--mm-field-input-shadow: var(--mm-field-input-shadow--focus);
				}
			}
		}

		.mm_runtimebranchpreview_menu_header_title
		{
			position: relative;
			display: block;
			margin: 6px 8px 8px;
			font-size: 11px;
			height: auto;
			color: var(--mm-color-400);

			&::before
			{
				content: 'Previewing';
			}

			.mm_runtimebranchpreview_menu_branches_copy_visible &::before
			{
				content: 'Copy Preview URL';
			}

			.mm_runtimebranchpreview_menu_branches_copy_visible.mm_runtimebranchpreview_menu_branches_copy_copied &::after
			{
				margin-left: 8px;
				color: var(--mm-color-success-500);
				content: '(Copied)';
			}
		}

		.mm_runtimebranchpreview_menu_branches_copy_visible .mm_runtimebranchpreview_menu_header_branch
		{
			display: none;
		}

		.mm_runtimebranchpreview_menu_header_branch_content
		{
			position: relative;
			display: flex;
			align-items: center;

			.mm_runtimebranchpreview_menu_header_branch_swatch
			{
				position: relative;
				display: inline-block;
				margin-right: 8px;
				width: 20px;
				height: 20px;
				border-radius: 50%;
				border: 3px solid rgb(255, 255, 255, 0.6);
				flex-shrink: 0;
				box-sizing: border-box;
			}

			.mm_runtimebranchpreview_menu_header_branch_name
			{
				position: relative;
				display: inline-block;
				max-width: 450px;
				font-size: 16px;
				font-weight: 600;
				color: var(--mm-color-900);
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
		}

		.mm_runtimebranchpreview_menu_preview_time_group
		{
			position: relative;
			display: flex;
			margin-top: 5px;
			align-items: center;

			.mm10_menubutton_menu_group_menuitem_container
			{
				position: relative;
				display: flex;
				margin-bottom: 8px;
				align-items: center;
			}

			.mm_runtimebranchpreview_menu_branches_copy_visible &
			{
				display: none;
			}

			.mm_runtimebranchpreview_menu_preview_time_indicator
			{
				position: relative;
				display: inline-block;
				margin: 0 10px 0 50px;
				padding: 0;
				width: 6px;
				height: 6px;
				border-radius: 50%;
				background-color: var(--mm-color-success-500);

				.mm_runtimebranchpreview.future &
				{
					background-color: var(--mm-color-primary-500);
				}
			}

			.mm_runtimebranchpreview_menu_preview_time_display
			{
				position: relative;
				display: inline-block;
				margin: 0 12px 0 0;
				padding: 0;
				height: auto;
			}

			.mm_runtimebranchpreview_menu_preview_time_clickable,
			.mm_runtimebranchpreview_menu_preview_time_clickable_reset
			{
				--mm-menubutton-common-menu-item-text-color: var(--mm-menubutton-common-menu-item-text-color--active);

				position: relative;
				display: inline-block;
				margin: 0 12px 0 0;
				padding: 0;
				height: auto;

				&.mm_runtimebranchpreview_menu_preview_time_clickable::before
				{
					position: absolute;
					right: 0;
					bottom: -1px;
					left: 0;
					height: 1px;
					border-radius: 2px;
					background-color: var(--mm-color-primary-500);
					content: '';
				}

				&.mm9_menubutton_menu_item_selected
				{
					--mm-menubutton-common-menu-item-text-color: var(--mm-menubutton-common-menu-item-text-color--active);
					--mm-menubutton-common-menu-item-background-color: var(--mm-menubutton-common-menu-item-background-color--default);
				}
			}
		}

		.mm_runtimebranchpreview_menu_branches_group
		{
			position: relative;
			display: block;
			max-height: 250px;
			overflow: auto;
			flex-grow: 1;

			.mm_runtimebranchpreview_menu_branch
			{
				position: relative;
				display: flex;
				flex-shrink: 0;
				align-items: center;

				.mm_runtimebranchpreview_menu_branch_content
				{
					position: relative;
					display: flex;
					align-items: center;
				}

				.mm_runtimebranchpreview_menu_branch_swatch
				{
					position: relative;
					display: inline-block;
					margin-right: 8px;
					width: 16px;
					height: 16px;
					border-radius: 50%;
					border: 3px solid rgb(255, 255, 255, 0.6);
					flex-shrink: 0;
					box-sizing: border-box;
				}

				.mm_runtimebranchpreview_menu_branch_text_container
				{
					position: relative;
					display: flex;
					align-items: center;
				}

				.mm_runtimebranchpreview_menu_branch_text
				{
					position: relative;
					display: inline-block;
					font-size: 12px;
					font-weight: 500;
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
					max-width: 400px;
				}

				.mm_runtimebranchpreview_menu_branch_text_label
				{
					position: relative;
					display: inline-block;
					margin-left: 8px;
					padding: 3px 8px;
					font-size: 11px;
					color: var(--mm-color-500);
					background-color: var(--mm-color-100);
					border-radius: 4px;

					&:empty
					{
						display: none;
					}

					.mm9_menubutton_menu_item_selected &
					{
						color: var(--mm-color-primary-500);
						background-color: var(--mm-color-primary-200);
					}
				}
			}
		}

		.mm_runtimebranchpreview_menu_footer_group
		{
			position: relative;
			display: block;
			flex-shrink: 0;
		}
	}
}

@keyframes mm_runtimebranchpreview_menu_progressbar_animation
{
	0%
	{
		left: -35%;
		right: 100%;
	}
	60%
	{
		left: 100%;
		right: -190%;
	}
	100%
	{
		left: 100%;
		right: -190%;
	}
}

@keyframes mm_runtimebranchpreview_menu_progressbar_animation_short
{
	0%
	{
		left: -200%;
		right: 100%;
	}
	60%
	{
		left: 107%;
		right: -8%;
	}
	100%
	{
		left: 107%;
		right: -8%;
	}
}