// Colors
$white: #FFFFFF;
$grey: #333333;
$light_grey: #EEEEEE;

@mixin screen_centered {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) !important /* override core properties */
;
	position: absolute;
}

@mixin hide_element {
	display: none;
}

.invisible {
	height: 0;
	visibility: hidden;
	margin: 0;
	padding: 0;
}

#frenzy-save-options {
	label {
		font-weight: bold;
		width: 150px;
		display: inline-block;
	}

	input[type=text] {
		min-width: 360px;
	}
}

#frenzy-buttons {
	p {
		display: inline-block;
	}
}

.frenzy-loading-indicator {
	img {
		vertical-align: middle;
	}
}

/* Product reordering post meta box */
.shopsimilar-products-order-list-desc {
	font-style: italic;
}

.shopsimilar-products-order-list {
	display: flex;
	list-style: none;
	flex-direction: column;
}

.shopsimilar-products-order-list-item {
	display: flex;
	align-items: center;
	margin: 1em 0 0;
	padding: 1em 0 0;
	border-top: 1px solid #CCCCCC;

	&.invisible {
		@extend .invisible;
	}
}

.shopstyle-products-details {
	flex: 1 1 auto;
	display: flex;

	div:first-of-type {
		margin-right: 2em;
	}

	&:hover {
		cursor: move;
	}
}

.shopsimilar-products-details-meta {
	display: flex;
	flex-direction: column;
	justify-content: center;

	p {
		margin-bottom: 0;
	}
}

.shopsimilar-products-remove {
	padding-right: 1em;
	align-self: center;
	display: flex;
}

.shopsimilar-products-remove span {
	width: 32px;
	height: 32px;
	opacity: 0.3;
	position: relative;
	cursor: pointer;

	&:hover {
		opacity: 1;
	}

	&:before,
	&:after {
		position: absolute;
		top: 8px;
		left: 16px;
		content: ' ';
		height: 16px;
		width: 2px;
		background-color: $grey;
	}

	&:before {
		transform: rotate(45deg);
	}

	&:after {
		transform: rotate(-45deg);
	}
}

#frenzy-meta-box-product-order {
	.hndle {
		line-height: 2em;

		a {
			font-size: 14px;
			float: right;

			&[disabled="disabled"] {
				margin-left: 1em;
			}
		}
	}

	.js-frenzy-product-list-add-products {
		float: right;
	}

	.inside {
		&.loading {
			opacity: 0.3;
		}
	}
}

#manual-products {
	.manual-products-content {
		@include screen_centered;
		height: 100%;
		width: 100%;
	}

	.manual-products-content-inner {
		position: relative;
		overflow: hidden;
	}

	header {
		padding: 1em 2em 0;
	}

	.manual-products-body {
		overflow: hidden;
		overflow-y: auto;
		border-top: 1px solid $light_grey;
		padding: 0 2em;
		position: static;

		.simple-pagination {
			margin-bottom: 2em;
			display: flex;
			justify-content: center;

			a {
				text-decoration: none;
			}

			.ellipsis {
				input[type=number] {
					min-width: 5em;
				}
			}

			&.hidden {
				@include hide_element;
			}
		}

		&.loading {
			opacity: 0.3;
		}
	}

	header {
		h2 {
			border-bottom: 1px solid $light_grey;
			overflow: hidden;
			margin-top: 0;
		}

		.close {
			float: right;
			top: -0.5em;
		}
	}
}

#js-shopstyle-available-products-list {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	margin: 2% -4.5% 2% -1%;
}

.shopstyle-product-item {
	cursor: pointer;

	&.fetch-currently-viewing {
		border-color: #333;
	}

	flex: 0 1 28%;
	@media (min-width: 850px) {
		flex: 0 1 20%;
	}
	text-align: center;
	border: 1px solid #EEEEEE;
	padding: 1%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	margin: 1%;
	position: relative;

	.photo {
		max-width: 100%;
		height: auto;
	}

	.button {
		&, &:active,
		&:disabled {
			display: none;
			background-color: $grey;
			color: $white;
			border: none;
			box-shadow: none;
		}

		&:hover {
			background-color: lighten($grey, 10%);
			color: $white;
		}
	}

	&:hover {
		border: 1px solid $grey;

		.button {
			display: block;

			&:disabled,
			&[disabled] {
				background-color: lighten($grey, 10%) !important; /* core overrides */
				color: $white !important; /* core overrides */
				text-shadow: none !important; /* core overrides */
			}
		}
	}

	&.added {
		opacity: 0.4;
	}
}

.shopstyle-product-item.is-manually-added {
	border: 1px solid orange;
}

.fetch-product-item-actions {
	@include screen_centered;
}

.shopstyle-ajax-loader {
	@include screen_centered;
	z-index: 9999;
	position: fixed !important;
}

#shopstyle-search-form {
	display: flex;
	flex-direction: column;
	margin-bottom: 2em;
}

.search-filter-reset {
	display: flex;
}

.reset-filters {
	flex: 1 1 auto;
	text-align: right;
	align-self: center;
}

.search-shopstyle {
	border: 1px solid #EEEEEE;
	padding: 5px;
	width: 60%;
	display: flex;
	justify-content: space-between;
}

#js-shopstyle-search {
	border: none;
	box-shadow: none;
	flex: 1 1 auto;
}

.shopstyle-modal-open {
	overflow: hidden;
}

.shopstyle-not-found {
	margin: 5em auto;
}

.shopstyle-filters {
	display: flex;
}

.shopstyle-filters-title {
	margin-bottom: 2px;
	font-size: 0.8em;
	color: $light_grey;
}

.shopstyle-filters .chosen-container {
	max-width: 200px;
}

[name*='filter-price-'] {
	width: 200px;
	margin-left: 10px;
}

.chosen-container {
	flex: 1 1 auto;
	margin-right: 5px;

	&:last-of-type {
		margin-right: 0;
	}
}

#load-more-button-container {
	text-align: center;
	margin-bottom: 40px;
}

.load-more-manual-products-button {
	padding: 15px 30px;
}

#frenzy_confirm_button {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, calc(-50% - 200px));
	height: 200px;
	max-width: 300px;
	z-index: 999999;
	border: 1px solid purple;
	border-radius: 10px;
	padding: 30px;
	font-weight: bold;
	border: 1px solid purple;
	padding: 30px;
	border-radius: 10px;
	background-color: #fff;
	box-shadow: 3px 3px 3px #aaa;
}

#frenzy_confirm_button .title {
	text-align: center;
}

#btnYes {
	margin-right: 5px;
}

#btnYes, #btnNo {
	border: 1px solid purple;
	padding: 10px;
	border-radius: 10px;
	width: 40%;
	display: inline-block;
	cursor: pointer;
}

.frenzy-brand {
	text-align: center;
}

.product-inner {
	font-size: 14px;
}

.wp-core-ui .attachment .filename .product-title {
	padding: 3px 3px 0;
	font-size: 11px;
	text-overflow: unset;
	white-space: nowrap;
}

.type-product .thumbnail .centered img {
	width: 100%;
}

#fetch-progress {
	background: #fff;
	position: fixed;
	bottom: 20px;
	width: 80%;
	z-index: 9999999;
	padding: 0 15px 15px;
	border: 1px solid #853d64;
}

.fetch-container-bg {
	color: #000 !important;
	background-color: #f1f1f1 !important;
	border-radius: 16px;
	border: 1px solid #853d64;
	flex: 1;
}

.fetch-container:after,
.fetch-container:before {
	content: "";
	display: table;
	clear: both;
}

.fetch-container {
	padding: 0.01em 16px;
	color: #fff !important;
	background: linear-gradient(90deg, #f09a67, #f08066);
	border-radius: 16px;
	box-sizing: border-box;
	padding: 0;
	height: 100%;
}

#fetchprods {
	width: 20%;
	margin-left: 15px;
	border: 1px solid #853d64;
	background: #fff;
	color: #853d64;
	font-weight: bold;
	font-size: 14px;
}

#fetch-progress-container span {
	padding-left: 15px;
	display: block;
	padding-top: 4px;
	padding-bottom: 4px;
}

#fetch-flex-container {
	display: flex;
}

#frenzy-shop-buttton-frame .attachments-browser .attachments {
	top: 100px;
}

#frenzy-shop-buttton-frame ul.attachments li.attachment {
	clear: both;
	width: 100% !important;
	border-bottom: 1px solid #b9b9b9;
	padding: 24px 0;
}

#frenzy-shop-buttton-frame .attachment-product img {
	height: 100%;
	width: auto;
}

#frenzy-shop-buttton-frame .product-image-container {
	height: 100px;
	overflow: hidden;
	margin-bottom: 5px;
}

.wp-core-ui #frenzy-shop-buttton-frame .attachment-preview {
	width: 16%;
	float: left;
}

#frenzy-shop-buttton-frame .attachment-products {
	width: 84%;
	width: 80%;
	float: left;
	text-align: left;
	padding-left: 16px;
}

#frenzy-shop-buttton-frame .product-image-container {
	height: 100px;
	overflow: hidden;
}

#frenzy-shop-buttton-frame .attachment-product {
	padding: 5px;
	border: 1px solid #eee;
	border-radius: 10px;
	text-align: center;
	margin-right: 10px;
	margin-bottom: 10px;
	width: 140px;
	cursor: pointer;
	display: inline-block !important;

	&.disabled {
		opacity: 0.7;
		cursor: default;
		position: relative;

		.fetch-loading-spinner {
			position: absolute;
			top: 40%;
			left: 40%;
		}
	}
}

.media-frame .attachment-product {
	display: none !important;
}

.wp-core-ui #frenzy-shop-buttton-frame .attachment.details,
.wp-core-ui #frenzy-shop-buttton-frame .attachment:focus {
	box-shadow: none !important;
}

#frenzy-shop-buttton-frame .compat-item, .wp-core-ui #frenzy-shop-buttton-frame .attachment.details .check {
	display: none;
}

#frenzy-shop-buttton-frame .attachment-product.ui-sortable-placeholder {
	display: inline-block;
}

#frenzy-shop-buttton-frame .button-product-remove {
	display: block;
	position: absolute;
	top: 5px;
	right: 5px;
	height: 22px;
	width: 22px;
	padding: 0;
	background: 0 0;
	background-color: #fff;
	border-radius: 3px;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .3);
	transition: none;
	background-image: url(/wp-includes/images/uploader-icons.png);
	background-repeat: no-repeat;
	cursor: pointer;
	text-align: left;
	color: #0073aa;
	text-decoration: underline;
	margin: 0;
	border: 0;
	background-position: -96px 4px;
}

.fetch-it-button,
.fetch-secondary-button {
	padding: 10px 20px;
	font-size: 14px;
	font-weight: bold;
	cursor: pointer;
	border: 0;
	position: absolute;
	background: linear-gradient(0, #f09a67, #f08066);
	border: 1px solid #f08066;
	top: 67px;
	color: white;
}

.fetch-it-button:disabled {
	opacity: 0.6;
}

.fetch-instructions {
	position: absolute;
	right: 310px;
	width: 210px;
	text-align: center;
	top: 68px;
}

.fetch-icon {
	width: 16px;
	margin-right: 3px;
}

.fetch-products-image {
	width: 40px;
}

.button.fetch-tinymce-button,
.button.fetch-tinymce-button:hover,
.button.fetch-tinymce-button:active {
	color: white;
	background: linear-gradient(0, #f09a67, #f08066);
	box-shadow: none;
	border-color: #f09a67;
}

.open-shop-frame {
	position: relative;
}

.fetch-it-button {
	left: 165px;
	padding: 9px 20px;
	font-weight: normal;
	font-size: 17px;

	span {
		position: relative;
		top: -7px;
		font-size: 12px;
	}
}

.fetch-secondary-button {
	left: 10px;
	background: white;
	color: #f08066;
}

.fetch-show-on-image-container .setting img {
	width: 116px;
	height: auto;
}

.setting.fetch-show-on-product-carousel-setting {
	float: left;

	.inner-setting {
		height: 78px;
		width: 116px;
		background: #f08966;
		display: inline-block;
		color: white;
		padding: 20px;
		box-sizing: border-box;
	}
}

.fetch-show-on-image-container .setting {
	float: none;
	width: auto;
}

.fetch-show-on-image-container {
	position: relative;
	display: inline-block;
	margin-bottom: 5px;
}

.fetch-show-on-image-container:nth-child(odd) {
	padding-right: 10px;
}

.fetch-show-on-checkbox {
	position: absolute;
	right: 0;
}

#frenzy-shop-buttton-frame .media-button-select {
	display: none;
}

.attachment-details .attachment-info .details {
	float: none;
}

 .commission-amount {
	display:inline-block;
	text-align: left;
	width: 100%;
	border-bottom : 1px solid #ddd;
	padding-bottom: 16px;
	margin-bottom: 16px;
}

#frenzy-shop-buttton-frame .attachment-details.save-ready {
	display: none;
}

.fetch-show-on-label {
	padding-bottom: 20px;
	margin-bottom: 24px !important;
	border-bottom: 1px solid #ddd;
}

#fetch-product-carousel .attachment-display-settings,
#fetch-product-carousel .media-frame-router,
#frenzy-shop-buttton-frame .media-frame-router,
#fetch-product-carousel .media-frame-content .media-toolbar-secondary,
#fetch-product-carousel .media-frame-content .media-toolbar-primary,
#frenzy-shop-buttton-frame .media-frame-content .media-toolbar-primary,
#frenzy-shop-buttton-frame .media-frame-content .media-toolbar-secondary {
	display: none;
}

#fetch-product-carousel .media-frame-content,
#frenzy-shop-buttton-frame .media-frame-content {
	top: 54px;
}

#fetch-product-carousel .attachments-browser .attachments {
	top: 120px;
}

#fetch-product-carousel.currently-editing-carousel .attachments-browser .attachments {
	top: 60px;
}

#fetch-product-carousel.currently-editing-carousel .attachments-browser .media-toolbar {
	height: 60px;
}

#fetch-product-carousel .wp-core-ui .attachments-browser .attachment .thumbnail .centered img.icon {
	max-height: 168px;
}

#fetch-product-carousel.currently-editing-carousel .fetch-add-to-carousel-button {
	left: 10px;
	top: 10px;
}

#fetch-product-carousel .wp-core-ui .attachment .thumbnail .centered {
	top: 17px;
}

#fetch-product-carousel .attachments-browser .media-toolbar,
#frenzy-shop-buttton-frame .attachments-browser .media-toolbar {
	background: white;
	height: 110px;
}

#fetch-product-carousel .media-frame-content[data-columns="9"] .attachment {
	width: 240px;
}

#fetch-product-carousel .attachment-preview {
	height: 200px;
}

.fetch-help-tooltip {
	position: absolute;
	top: 120px;
	left: 10px;
	text-align: center;
	border-radius: 100%;
	border: 1px solid black;
	width: 18px;
	height: 18px;
	z-index: 99;

	&.fetch-add-to-tooltip {
		top: 0;
		left: 60px;
	}

	.fetch-tooltip-icon {
		color: black;
	}

	.fetch-tooltip-arrow-up,
	.fetch-tooltip-arrow-left {
		width: 0;
		height: 0;
		border-left: 9px solid transparent;
		border-right: 9px solid transparent;
		border-bottom: 20px solid #F79C6C;
		position: absolute;
		top: -16px;
		left: 126px;

		.fetch-add-to-tooltip & {
			left: 50px;
		}
	}

	.fetch-tooltip-arrow-left {
		border-top: 9px solid transparent;
		border-bottom: 9px solid transparent;
		border-right: 20px solid #F79C6C;
	}

	.fetch-tooltip-teaser {
		top: -5px;
		width: 320px;
		text-align: left;
		left: 30px;
		position: absolute;
	}

	.fetch-help-tooltip-content {
		background: #F79C6C;
		display: none;
		width: 270px;
		color: white;
		padding: 10px;
		z-index: 999999;
		text-align: left;
		position: absolute;
		border-radius: 10px;
		top: 35px;
		left: 50%;
		margin-left: -135px;
		text-transform: none;
		font-weight: bold;

		&:hover {
			display: block;
		}
	}

	&:hover {
		.fetch-help-tooltip-content {
			display: block;
		}
	}
}

.fetch-add-to-tooltip {
	.fetch-tooltip-arrow-up {
		left: 65px;
	}

	.fetch-help-tooltip-content {
		left: -65px;
		margin-left: 0;
		width: 230px;
	}
}

.fetch-ribbon {
	position: absolute;
	left: -5px;
	top: -5px;
	z-index: 1;
	overflow: hidden;
	width: 75px;
	height: 75px;
	text-align: right;
}

.fetch-ribbon span {
	font-size: 10px;
	font-weight: bold;
	color: #FFF;
	text-transform: uppercase;
	text-align: center;
	line-height: 20px;
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	width: 100px;
	display: block;
	background: #79A70A;
	background: linear-gradient(#F09A67 0%, #f08066 100%);
	box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
	position: absolute;
	top: 19px;
	left: -21px;
}

.fetch-ribbon span::before {
	content: "";
	position: absolute;
	left: 0px;
	top: 100%;
	z-index: -1;
	border-left: 3px solid #f08066;
	border-right: 3px solid transparent;
	border-bottom: 3px solid transparent;
	border-top: 3px solid #f08066;
}

.fetch-ribbon span::after {
	content: "";
	position: absolute;
	right: 0px;
	top: 100%;
	z-index: -1;
	border-left: 3px solid transparent;
	border-right: 3px solid #f08066;
	border-bottom: 3px solid transparent;
	border-top: 3px solid #f08066;
}

.wp-core-ui #frenzy-shop-buttton-frame .attachment .thumbnail .centered img {
	width: 161px;
}

.wp-core-ui #fetch-product-carousel .button:active {
	transform: none;
}

#fetch-product-carousel .attachment-details .settings-save-status {
	float: none;
}

.lds-ring {
	display: inline-block;
	position: relative;
	width: 24px;
	height: 24px;
}

.lds-ring div {
	box-sizing: border-box;
	display: block;
	position: absolute;
	width: 24px;
	height: 24px;
	margin: 6px;
	border: 6px solid #f08066;
	border-radius: 50%;
	animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
	border-color: #f08066 transparent transparent transparent;
}

.block-editor-writing-flow {
	height: auto;
}

.lds-ring div:nth-child(1) {
	animation-delay: -0.45s;
}

.lds-ring div:nth-child(2) {
	animation-delay: -0.3s;
}

.lds-ring div:nth-child(3) {
	animation-delay: -0.15s;
}
#frenzy-shop-buttton-frame .uploader-inline,
#manual-products .uploader-inline,
#fetch-product-carousel .uploader-inline {
	display: none;
}

.auto-selection-options {
	width: 168px;
	float: right;
	left: 0;
	text-align: right;
}

.attachment.save-ready.is-featured-image::before {
	content: "Featured Image";
	position: absolute;
	left: 0;
	top: 6px;
}

.js-check-all,
.js-uncheck-all {
	padding: 5px;
	background: transparent;
	border: 1px solid #222;
}

.js-check-all {
	margin-right: 4px;
}

.editor-block-list-item-fetch-product-carousel .editor-block-types-list__item-icon {
	background: url('../../images/circle-icon-gutenberg.png');
	background-size: 24px;
	background-repeat: no-repeat;
	background-position: center;

	svg {
		display: none;
	}
}

.editor-block-list-item-fetch-product-carousel .editor-block-types-list__item-icon {
	background: url('../../images/circle-icon-gutenberg.png');
	background-size: 24px;
	background-repeat: no-repeat;
	background-position: center;

	svg {
		display: none;
	}
}

[aria-label="Add Product Carousel"],
[aria-label="Block: Product Carousel"] .editor-block-icon {
	background: url('../../images/circle-icon-gutenberg.png');
	background-size: 24px;
	background-repeat: no-repeat;
	background-position: center;

	svg {
		display: none !important;
	}
}

@keyframes lds-ring {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

/* Checkbox switch */

.shop-toggle-wrapper {
	width: 277px;
	position: absolute;
	right: 10px;
	top: 10px;
}

.shop-toggle-price-wrapper{
	top: 40px;
	width: 219px;
}

.shop-toggle-wrapper label{
	margin-top: 15px;
	display: inline-block;
	font-size:14px;
	vertical-align: top;
	margin-right: 10px;
}

.checkbox-switch {
	margin-top: 13px;
    cursor: pointer;
    display: inline-block;
    overflow: hidden;
    position: relative;
    text-align: left;
    width: 65px;
    height: 25px;
    -webkit-border-radius: 30px;
    border-radius: 30px;
    line-height: 1.2;
    font-size: 12px;
}

.checkbox-switch input.input-checkbox {
	position: absolute;
	left: 0;
	top: 0;
	width: 65px;
	height: 25px;
	padding: 0;
	margin: 0;
	opacity: 0;
	z-index: 2;
	cursor: pointer;
}

.checkbox-switch .checkbox-animate {
    position: relative;
    width: 65px;
    height: 25px;
    background-color: #95a5a6;
    -webkit-transition: background 0.25s ease-out 0s;
    transition: background 0.25s ease-out 0s;
}

.checkbox-switch .checkbox-animate:before {
	content: "";
	display: block;
	position: absolute;
	width: 15px;
	height: 15px;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	background-color: #fff;
	top: 5px;
	left: 5px;
	 -webkit-transition: left 0.3s ease-out 0s;
    transition: left 0.3s ease-out 0s;
    z-index: 10;
}

.checkbox-switch input.input-checkbox:checked + .checkbox-animate {
	background-color: #f08066;
}

.checkbox-switch input.input-checkbox:checked + .checkbox-animate:before {
	left: 45px;
	background-color: #fff;
}

.checkbox-switch .checkbox-off,
.checkbox-switch .checkbox-on {
	float: left;
	color: #fff;
	font-weight: 700;
	padding-top: 6px;
	 -webkit-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
}

.checkbox-switch .checkbox-off {
	margin-left: 30px;
	opacity: 1;
}

.checkbox-switch .checkbox-on {
	display: none;
	float: right;
	margin-right: 25px;
	opacity: 0;
}

.checkbox-switch input.input-checkbox:checked + .checkbox-animate .checkbox-off {
	display: none;
	opacity: 0;
}

.checkbox-switch input.input-checkbox:checked + .checkbox-animate .checkbox-on {
	display: block;
	opacity: 1;
}

.fetch-table {
	margin: 20px 0;
}

.dataTables_length,
.dataTables_filter {
	margin: 10px 0;
}

.dataTables_paginate {
	margin-top: 20px;

	.paginate_button {
		display: inline-block;
		color: #ffffff;
		background: #f79c6c;
		padding: 6px;
		margin-right: 10px;
	}
}

.fetch-settings {
	.form-group {
		label {
			margin-bottom: 16px;
		}

		input,
		textarea,
		select {
			display: block;
		}
	}
}