/*!
 * Name    : Visual Portfolio
 * Author  : nK https://nkdev.info
 */

@use "sass:math";
@use "sass:string";
@use "sass:color";

$escaped-svg-characters: (
	("<", "%3c"),
	(">", "%3e"),
	("#", "%23"),
	("(", "%28"),
	(")", "%29"),
) !default;

// Replace `$search` with `$replace` in `$string`
// Used on our SVG icon backgrounds for custom forms.
// -
// @author Hugo Giraudel
// @param {String} $string - Initial string
// @param {String} $search - Substring to replace
// @param {String} $replace ('') - New value
// @return {String} - Updated string
@function str-replace($string, $search, $replace: "") {
	$index: string.index($string, $search);

	@if $index {
		@return string.slice($string, 1, $index - 1) + $replace + str-replace(string.slice($string, $index + string.length($search)), $search, $replace);
	}

	@return $string;
}

// See https://codepen.io/kevinweber/pen/dXWoRw
// -
// Requires the use of quotes around data URIs.

@function escape-svg($string) {
	@if string.index($string, "data:image/svg+xml") {
		@each $char, $encoded in $escaped-svg-characters {
			$string: str-replace($string, $char, $encoded);
		}
	}

	@return $string;
}

@import "../../../gutenberg/components/pro-note/style.scss";

#adminmenu a[href*="https://visualportfolio.co/pricing/"],
.wp-list-table.plugins a[href*="https://visualportfolio.co/pricing/"],
.vpf-admin-toolbar a[href*="https://visualportfolio.co/pricing/"] {
	font-weight: 700;
	color: #11b916;

	.dashicons {
		transition: none;
	}

	&:hover,
	&:focus {
		color: #22e429;
	}
}

/**
 * Plugin Icon
 */
.dashicons-visual-portfolio,
.mce-widget .mce-i-visual-portfolio {
	background-image: url(../../../assets/admin/images/icon.svg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 18px;
	opacity: 0.6;
}

.mce-widget .mce-i-visual-portfolio {
	background-image: url(../images/icon-mce.svg);
	opacity: 1;
}

.menu-top.current .dashicons-visual-portfolio,
.menu-top:hover .dashicons-visual-portfolio,
.wp-has-current-submenu .dashicons-visual-portfolio {
	opacity: 1;
}

/**
 * Visual Composer Icon
 */
.vc_element-icon[data-is-container="true"].icon-visual-portfolio,
.vc_element-icon.icon-visual-portfolio {
	background-position: 50% 50%;
}

.vc_element-icon.icon-visual-portfolio,
.vc_control-visual-portfolio {
	position: relative;
	overflow: hidden;
	background-image: url(../images/icon-gutenberg.svg);
	background-position: 50% 50%;
	background-size: cover;
	border-radius: 3px;
}

.vc_add-element-container .icon-visual-portfolio {
	position: absolute;
}

.vc_control-visual-portfolio {
	display: inline-block;
	width: 18px;
	height: 18px;
	margin: 0 2px;
	cursor: pointer;
}

.vc_controls-row .vc_control-visual-portfolio {
	float: right;
	margin: 4px;
}

.vc_control-visual-portfolio-overlay {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2;
}

/*
 * Admin Menu.
 * We need to use additional ID `#toplevel...` because when disabled
 * Portfolio Archive in settings, the menu ID changes.
 */
/* stylelint-disable-next-line selector-id-pattern */
#menu-posts-portfolio,
#toplevel_page_visual-portfolio-settings {
	#adminmenu & ul.wp-submenu-wrap li {
		clear: both;
	}

	li:not(:last-child) a[href^="edit-tags.php?taxonomy=portfolio_tag&post_type=portfolio"]::after,
	li:not(:last-child) a[href^="edit.php?post_type=portfolio&page=vpf_proofing_page"]::after,
	li:not(:last-child) a[href^="edit.php?post_type=vp_proofing"]::after {
		display: block;
		float: left;
		width: calc(100% + 26px);
		margin: 13px -15px 8px;
		content: "";
		border-bottom: 1px solid rgba(255, 255, 255, 10%);

		@media screen and (max-width: 782px) {
			width: calc(100% + 30px);
			margin: 20px -20px 8px;
		}
	}
}

/*
 * Admin Toolbar.
 */
.vpf-admin-toolbar {
	background-color: #fff;
	border-bottom: 1px solid #d7dbde;

	@media screen and (max-width: 600px) {
		display: none;
	}

	#wpcontent & {
		padding-left: 20px;
		margin-left: -20px;
	}

	h2 {
		display: inline-block;
		padding: 5px 0;
		margin: 0 10px 0 0;
		font-size: 14px;
		line-height: 2.5714;

		i {
			display: inline-block;
			width: 20px;
			height: 20px;
			margin-top: -5px;
			margin-right: 5px;
			vertical-align: middle;
			filter: invert(1);
			opacity: 1;
		}
	}

	.vpf-admin-toolbar-tab {
		display: inline-block;
		padding: 5px 10px;
		margin: 0 2px;
		font-size: 14px;
		line-height: 2.5714;
		color: inherit;
		text-decoration: none;

		&.is-active {
			padding-bottom: 2px;
			border-bottom: #007cba solid 3px;
		}

		&:hover,
		&:focus {
			color: #007cba;
		}

		.dashicons {
			line-height: 2;
		}
	}
}

/**
 * oEmbed preview
 */
.vp-oembed-preview {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
	color: #a2a2a2;
	background-color: #f1f1f1;
	border: 1px solid #e8e8e8;

	&::after {
		position: absolute;
		top: 50%;
		left: 50%;
		z-index: 1;
		display: block;
		width: 20px;
		height: 20px;
		margin-top: -10px;
		margin-left: -10px;
		/* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
		font-family: dashicons;
		font-size: 20px;
		font-style: normal;
		font-weight: 400;
		line-height: 1;
		text-align: center;
		text-decoration: inherit;
		content: "\f126";
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	> iframe {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 2;
		width: 100%;
		height: 100%;
	}
}

/**
 * Post featured image focal point meta.
 */
.vpf-post-image-focal-point-panel {
	margin-top: 20px;

	> .components-panel__row {
		gap: 15px;
	}

	.components-input-control {
		flex: 1;
	}
}

/**
 * Form inputs
 */
.vp-input {
	width: 100%;
}

/**
 * Portfolio Post Type
 */
.vp-portfolio__thumbnail {
	position: relative;
	display: block;
	max-width: 70px;
	padding-top: 100%;
	overflow: hidden;
	border-radius: 3px;

	img {
		position: absolute;
		top: 0;
		left: 0;
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}

.vp-portfolio__thumbnail:empty {
	background-color: #f1f1f1;
	border: 1px solid #e8e8e8;

	&,
	&:hover,
	&:active,
	&:focus {
		color: #a2a2a2;
	}

	&::after {
		position: absolute;
		top: 50%;
		left: 50%;
		display: block;
		width: 18px;
		height: 18px;
		margin-top: -9px;
		margin-left: -9px;
		content: "";
		background-image: url("#{escape-svg('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="0.75" y="0.75" width="18.5" height="18.5" rx="1.25" stroke="#a2a2a2" stroke-width="1.5"/><path d="M1 15.5L6 12L10 14L14.5 10L19 13" stroke="#a2a2a2" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>')}");
		background-size: cover;
	}
}

.wp-list-table {
	th.column-portfolio_post_thumbs {
		width: 70px;
	}

	th.column-vp_lists_post_icon {
		width: 28px;
	}

	th.column-vp_lists_post_shortcode {
		width: 250px;
	}

	@media screen and (max-width: 782px) {
		/* Hide column on mobile device */
		th.column-portfolio_post_thumbs,
		th.column-vp_lists_post_icon {
			display: none;
		}

		tr:not(.inline-edit-row, .no-items) {
			td.column-portfolio_post_thumbs,
			td.column-vp_lists_post_icon {
				float: left;
				width: 70px !important;
				min-width: 70px;
			}

			td.column-vp_lists_post_icon {
				width: 40px !important;
			}

			td.column-portfolio_post_thumbs::before {
				content: none;
			}

			td.column-title {
				overflow: hidden;
				clear: right;
			}
		}
	}
}

/**
 * Admin Notices
 */
.vpf-admin-notice {
	display: flex;
	padding: 0;
	border: none;
	border-left: 4px solid #2540cc;
	box-shadow: 0 0 4px rgba(0, 0, 0, 15%);

	h3 {
		margin-top: 10px;
		margin-bottom: 12px;
		font-size: 16px;

		svg {
			display: inline-block;
			width: 1.3em;
			height: 1.3em;
			margin-right: 0.2em;
			vertical-align: -0.28em;
		}
	}

	.vpf-admin-notice-icon {
		display: flex;
		justify-content: center;
		width: 50px;
		min-width: 50px;
		padding-top: 14px;
		background-color: #f2f8ff;
	}

	.dashicons-visual-portfolio {
		display: block;
		width: 22px;
		height: 22px;
		filter: invert(1);
		background-size: 22px;
		opacity: 1;
	}

	.vpf-admin-notice-content {
		padding: 6px 16px;
	}
}

/**
 * Portfolio List page
 */
.vp-portfolio-list__icon {
	position: relative;
	display: block;
	max-width: 70px;
	padding-top: 100%;
	overflow: hidden;
	color: inherit;
	color: #868686;
	background-color: #f1f1f1;
	border: 1px solid #e8e8e8;
	border-radius: 3px;

	&:hover,
	&:active,
	&:focus {
		color: #5f5f5f;
	}

	svg {
		position: absolute;
		top: 15%;
		left: 15%;
		display: block;
		width: 70%;
		height: 70%;
		object-fit: cover;
	}
}

/**
 * Settings
 */
.portfolio_page_visual-portfolio-settings,
.toplevel_page_visual-portfolio-settings {
	$settings_nav_width: 220px !default;
	$settings_content_height: 340px !default;

	// Navigation.
	@media (min-width: 782px) {
		h2.nav-tab-wrapper {
			position: relative;
			margin-right: -1px;
			border: none;
		}

		.nav-tab-wrapper {
			display: flex;
			flex-direction: column;
			float: left;
			width: $settings_nav_width;

			.nav-tab {
				padding: 10px 15px;
				margin-bottom: -1px;
				margin-left: 0;
				background: none;
				border: 1px solid transparent;
				border-right: none;
				border-left: 2px solid transparent;
			}

			.nav-tab:hover,
			.nav-tab:focus,
			.nav-tab-active {
				background: #fff;
				border-color: #d7dbde;
				border-left-color: #007cba;
			}
		}

		.metabox-holder {
			float: left;
			width: calc(100% - #{$settings_nav_width + 2});
			// Compensate 10px padding + 2px border.
			min-height: $settings_content_height + 22px;
			margin-top: 9px;

			> div,
			> div > form {
				min-height: $settings_content_height;
			}
		}
	}

	.nav-tab-wrapper {
		svg {
			width: 1.2em;
			height: 1.2em;
			margin-right: 0.5em;
			vertical-align: -0.2em;
		}
	}

	// Content with settings.
	.metabox-holder {
		box-sizing: border-box;
		padding: 10px 20px;
		background-color: #fff;
		border: 1px solid #d7dbde;

		form {
			display: flex;
			flex-direction: column;
		}

		// Footer with save button.
		.metabox-holder-footer {
			position: sticky;
			bottom: 0;
			padding: 15px 20px;
			margin-top: auto;
			margin-right: -20px;
			margin-bottom: -10px;
			margin-left: -20px;
			background-color: #f5f5f5;
			border-top: 1px solid #ddd;

			> p {
				padding: 0;
				margin: 0;
			}
		}
	}

	// Controls base layout.
	.form-table {
		tr {
			display: block;
		}

		th {
			display: block;
			width: 100%;
			padding: 0;
			margin-bottom: 10px;
		}

		td {
			display: block;
			padding: 0;
			margin-bottom: 20px;
		}
	}

	.submit {
		margin: 0;
	}

	.description {
		opacity: 0.7;
	}

	// Section Title.
	.vpf-setting-type-section_title {
		&::before {
			display: block;
			padding-top: 15px;
			margin-right: -20px;
			margin-left: -20px;
			content: "";
			border-top: 1px solid #d7dbde;
		}

		label {
			font-size: 15px;
		}

		label:empty {
			display: block;
			margin-top: -20px;
		}

		.description {
			margin-top: -5px;
		}
	}

	// Image control.
	.wpsa-image-remove {
		display: none;
		margin-left: 10px;
	}

	// Notices styles fix.
	.metabox-holder .notice {
		padding: 15px;
	}

	// Pro control.
	.vpf-settings-control-pro {
		> td {
			pointer-events: none;
		}

		.description {
			opacity: 0.3;
		}

		.vpf-settings-control-pro-label {
			position: relative;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 18px;
			height: 18px;
			margin-left: 10px;
			font-family: sans-serif;
			font-size: 11px;
			line-height: 18px;
			color: #fff;
			text-align: center;
			text-decoration: none;
			cursor: pointer;
			background-color: #4c4c4c;
			border-radius: 10px;

			> span {
				position: absolute;
				bottom: 100%;
				z-index: 9990;
				display: none;
				width: 130px;
				padding: 10px;
				margin-bottom: 10px;
				background-color: #000;
				border-radius: 4px;
				box-shadow: 0 1px 7px rgba(#000, 0.3);
			}

			&:hover > span,
			&:focus > span {
				display: block;
			}
		}

		// Hide pro control info from individual breakpoint settings.
		&.breakpoint_xs .vpf-settings-control-pro-label,
		&.breakpoint_sm .vpf-settings-control-pro-label,
		&.breakpoint_md .vpf-settings-control-pro-label,
		&.breakpoint_lg .vpf-settings-control-pro-label,
		&.breakpoint_xl .vpf-settings-control-pro-label {
			display: none;
		}
	}

	/**
     * Toggle Field.
     **/
	.vp-toggle-field {
		position: relative;
		display: inline-block;

		input {
			width: 0;
			height: 0;
			opacity: 0;
		}

		.vp-toggle-field-slider-round {
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			width: 36px;
			height: 18px;
			cursor: pointer;
			background-color: #ccc;
			border-radius: 34px;
			transition: 0.4s;

			&::before {
				position: absolute;
				bottom: 3px;
				left: 3px;
				width: 12px;
				height: 12px;
				content: "";
				background-color: #fff;
				border-radius: 50%;
				transition: 0.4s;
			}
		}

		input:checked + .vp-toggle-field-slider-round {
			background-color: #007cba;
		}

		input:focus + .vp-toggle-field-slider-round {
			box-shadow: 0 0 1px #007cba;
		}

		input:checked + .vp-toggle-field-slider-round::before {
			transform: translateX(18px);
		}

		.description {
			margin-left: 22px;
		}
	}

	/**
     * Range Field.
     **/
	.vp-range-field {
		width: 183px;
		height: 3px;
		vertical-align: middle;
		cursor: pointer;
		background: #007cba;
		outline: none;
		box-shadow: none;
		appearance: none;

		&::-webkit-slider-thumb {
			width: 20px;
			height: 20px;
			background: #fff;
			border: 1px solid #7e8993;
			border-radius: 20px;
			transition: border-width 0.2s cubic-bezier(0.26, 0.08, 0.15, 1);
			appearance: none;
		}

		&:active::-webkit-slider-thumb {
			border-color: #007cba;
			box-shadow: 0 0 0 1px #007cba;
		}
	}

	.vp-range-number-field {
		box-sizing: border-box;
		width: 55px;
		margin-left: 9px;
		vertical-align: middle;
		background: #fff;
		border: 1px solid #8f969f;
		border-radius: 4px;
	}

	/**
     * Select2 Field
     */
	.select2-container {
		.select2-selection--single {
			width: 350px;
			height: 30px;
			border: 1px solid #8c8f94;
		}
	}
}

/**
 * PRO Notices.
 */
.portfolio_page_visual-portfolio-settings,
.toplevel_page_visual-portfolio-settings,
.portfolio_page_vpf_proofing_page {
	// Settings info Pro.
	.social_pro_info > th {
		display: none;
	}
}

/* stylelint-disable selector-id-pattern */
#vp_social_integrations,
#vp_watermarks,
#vp_white_label {
	.metabox-holder-footer {
		display: none;
	}
}

/**
 * Welcome Screen.
 */
.portfolio_page_visual-portfolio-welcome,
.toplevel_page_visual-portfolio-welcome {
	background-color: #fff;
}

.vpf-welcome-screen {
	box-sizing: border-box;
	padding-right: 20px;
	padding-left: 20px;
	margin-left: -20px;
	font-size: 16px;
	line-height: 1.6;

	*,
	*::before,
	*::after {
		box-sizing: inherit;
	}

	@media screen and (max-width: 782px) {
		margin-left: -10px;
	}

	p {
		font-size: inherit;
		line-height: 1.6;
	}

	h2 {
		margin-top: 0;
		font-size: 2em;
		font-weight: 700;
		line-height: 1.2;
		text-align: center;
	}

	.vpf-welcome-head {
		position: relative;
		z-index: 0;
		padding: 120px 0;
		margin-bottom: 120px;
		color: #fff;
		background-color: #000;

		@media screen and (max-width: 600px) {
			margin-bottom: 60px;
		}

		.vpf-welcome-head-background {
			position: absolute;
			top: 0;
			right: -20px;
			z-index: -1;
			display: block;
			width: calc(100% + 40px);
			height: 100%;
			object-fit: cover;
		}

		// Logo.
		.vpf-welcome-head-logo {
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 0;
			margin-bottom: 20px;
			color: #fff;

			@media screen and (max-width: 600px) {
				font-size: 20px;
			}
		}

		.dashicons-visual-portfolio {
			display: inline-block;
			width: 60px;
			height: 60px;
			margin-top: 3px;
			margin-right: 20px;
			background-size: 60px;
			opacity: 1;

			@media screen and (max-width: 600px) {
				width: 30px;
				height: 30px;
				margin-right: 10px;
				background-size: 30px;
			}
		}

		// Subtitle.
		.vpf-welcome-subtitle {
			max-width: 480px;
			margin: 0 auto;
			font-weight: 500;
			line-height: 1.7;
			color: #c1c1c1;
			text-align: center;
		}

		// Pro info.
		.vpf-welcome-head-pro-info {
			position: absolute;
			bottom: -50px;
			left: 50%;
			width: 100%;
			max-width: 570px;
			padding: 25px 45px;
			color: #131313;
			text-align: center;
			background-color: #fff;
			border-radius: 3px;
			box-shadow: 0 5px 10px 0 rgba(#000, 0.1);
			transform: translateX(-50%);

			@media screen and (max-width: 1120px) {
				max-width: 530px;
			}
			@media screen and (max-width: 600px) {
				position: relative;
			}
		}
	}

	.vpf-welcome-content {
		max-width: 900px;
		margin: 0 auto;

		// Title.
		.vpf-welcome-content-title {
			max-width: 600px;
			margin: 0 auto;
			margin-bottom: 80px;
		}

		// Features.
		.vpf-welcome-content-features {
			display: grid;
			grid-template-columns: 1fr 1fr;
			grid-gap: 30px;
			list-style: none;

			@media screen and (max-width: 600px) {
				grid-template-columns: 1fr;
			}

			li {
				position: relative;
				padding-left: 50px;

				> span {
					position: absolute;
					top: 0;
					left: 0;
					display: block;
					font-size: 1.6em;
					line-height: 1.3;
				}

				> strong {
					font-size: 1.6em;
					font-weight: 400;
					line-height: 1.3;
					color: #1d2327;
				}
			}
		}

		hr {
			max-width: 200px;
			margin-top: 30px;
			margin-bottom: 60px;
		}

		// Buttons.
		.vpf-welcome-content-buttons {
			display: grid;
			grid-template-columns: 1fr 1fr;
			grid-gap: 10px;
			max-width: 450px;
			margin: 0 auto;
			margin-bottom: 50px;
			text-align: center;

			@media screen and (max-width: 600px) {
				grid-template-columns: 1fr;
			}

			a {
				padding: 11px;
				font-size: 14px;
				font-weight: 600;
				color: #fff;
				text-decoration: none;
				text-transform: uppercase;
				background-color: #2540cc;
				border-radius: 3px;

				&:hover,
				&:focus {
					background-color: #13289a;
				}

				&:last-child {
					color: #000;
					background-color: #d2d2d2;

					&:hover,
					&:focus {
						background-color: #bdbdbd;
					}
				}
			}
		}
	}

	// Pro.
	.vpf-welcome-foot-pro-info {
		max-width: 700px;
		padding: 40px;
		margin: 60px auto;
		background-color: #fff;
		border: 1px solid #e0e0e0;

		ul {
			max-width: 500px;
			margin: 40px auto;
			column-count: 2;
			font-weight: 500;

			@media screen and (max-width: 600px) {
				column-count: 1;
			}

			> li::before {
				display: inline-block;
				width: 20px;
				height: 20px;
				margin-right: 6px;
				vertical-align: -0.25em;
				content: "";
				background-image: url("#{escape-svg('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="#1e9059"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg>')}");
			}
		}

		> a {
			display: block;
			padding: 16px;
			font-size: 16px;
			font-weight: 600;
			color: #fff;
			text-align: center;
			text-decoration: none;
			text-transform: uppercase;
			background-color: #1e9059;
			border-radius: 3px;

			&:hover,
			&:focus {
				background-color: #0f7544;
			}
		}
	}
}