/**
 * Greyd Plugin Backend Feature Styles
 * 
 * This style is loaded on admin screens only.
 *
 * @package Greyd
 */


/**
 * Greyd Admin menu item
 */
#toplevel_page_greyd_dashboard.current img {
	opacity: 1;
}

#toplevel_page_greyd_dashboard.current::after {
	border-right-color: #ffffff;
}


/**
 * Greyd Button
 */
.button-greyd,
.wp-core-ui .button-greyd {
	/* transform: scale(3); */
	color: #1f0026;
	border-color: #f2b25a;
	background: linear-gradient(150deg, #f9dd61 0%, #f2b25a 33%, #9674EB 66%, #4f309e 100%);
	background-size: 400% 250%;
	background-position: 0 0;
	transition: all .3s ease-out;
}

.button-greyd:hover,
.wp-core-ui .button-greyd:hover {
	color: #fff;
	border-color: #4f309e;
	background: linear-gradient(150deg, #f9dd61 0%, #f2b25a 33%, #9674EB 66%, #4f309e 100%);
	background-size: 400% 250%;
	background-position: 100% 100%;
}

.button-greyd .dashicons,
.wp-core-ui .button-greyd .dashicons {
	transition: none;
}


/**
 * Greyd Notice
 */
.greyd-notice {
	display: flex;
	flex-direction: row;
	padding: var(--greyd-gap-small);
	margin: var(--greyd-gap-small) 0;
	gap: var(--greyd-gap-small);
	border: 1px solid var(--wp-admin-color-dark);
	border-left-width: 10px;
	border-radius: 3px;
	background-color: #ffffff;
	color: var(--wp-admin-color-dark);
	animation: noticePulse 1.2s ease .4s;
}

@keyframes noticePulse {
	0% {
		box-shadow: 0 0 0 -4px currentColor;
	}

	100% {
		box-shadow: 0 0 0 6px transparent;
	}
}

.greyd-notice :is(h1, h2, h3, h4, h5, h6, p) {
	margin-top: 0;
	max-width: 50em;
}

.greyd-notice .notice-links {
	display: flex;
	align-items: center;
	gap: var(--greyd-gap-small);
}

.greyd-notice a {
	color: var(--wp-admin-color-dark);
}

.greyd-notice a:hover {
	color: var(--wp-admin-color-medium);
}

.emoji {
	transform: scale(1.2);
}

/**
 * WP Dashboard
 */
#greyd-theme-widget .inside {
	padding: 0;
	margin: 0;
}

#greyd-theme-widget .greyd-notice {
	margin: -1px;
	border-radius: 0;
	border-width: 2px 2px 2px 10px;
}


/**
 * =================================================================
 *                          Greyd Dashboard
 * =================================================================
 */


/**
 * WP Body
 */
/* body.toplevel_page_greyd_dashboard #wpcontent,
body.toplevel_page_greyd_dashboard #wpbody,
body.toplevel_page_greyd_dashboard #wpbody-content {
	padding: 0px;
}

body.toplevel_page_greyd_dashboard #wpfooter {
	display: none;
} */


/**
 * Dashboard Wrapper
 */
.greyd-dashboard {
	margin: 0;
	min-height: calc(100vh - 32px);
	/* display: grid;
	grid-template-columns: 1fr max(300px, 30vw); */
}

.greyd-dashboard > * {
	padding: var(--greyd-gap-x);
}

.greyd-dashboard > * > :first-child {
	margin-top: 0;
	padding-top: 0;
}

.greyd-dashboard h2 {
	color: var(--wp-admin-color-medium);
	font-weight: 400;
	font-size: inherit;
}

.greyd-dashboard h3 {
	margin-bottom: 2em;
}

.greyd-dashboard hr {
	border-bottom: 0;
	margin: var(--greyd-gap-y) 0
}


/**
 * Sidebar
 */
.greyd-dashboard .sidebar {
	background-color: var(--wp-admin-color-dark);
	color: var(--wp-admin-color-medium);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.greyd-dashboard .sidebar :is(h1, h2, h3, h4, h5, h6) {
	color: #ffffff;
}

.greyd-dashboard .sidebar li a {
	color: var(--wp-admin-color-medium);
}

.greyd-dashboard .sidebar a:hover {
	color: #ffffff;
}

.greyd-dashboard .sidebar .changelog {
	max-height: 500px;
	overflow: auto;
}

.greyd-dashboard .sidebar .changelog h4 {
	margin: 2em 0 0.5em;
}

.greyd-dashboard .sidebar .changelog > h4:first-child {
	margin-top: 0;
}

@media only screen and (max-width: 960px) {
	.greyd-dashboard {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.greyd-dashboard .sidebar {
		flex-direction: row;
		align-items: center;
	}
}


/**
 * Sidebar Form
 */
.greyd-dashboard .sidebar textarea {
	width: 100%;
	background-color: rgba(255, 255, 255, .05);
	padding: 4px 10px;
	color: #fff;
}

.greyd-dashboard .sidebar label {
	display: block;
	margin-bottom: 4px;
}

.greyd-dashboard .sidebar input[type=checkbox],
.greyd-dashboard .sidebar input[type=radio] {
	background-color: rgba(255, 255, 255, .05);
}


/**
  * Feature Grid
  */
.greyd-card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--greyd-gap-small);
}

.greyd-features .greyd-card-grid {
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.greyd-card {
	display: flex;
	flex-direction: column;
	background-color: #ffffff;
	border: 1px solid #D7D7D7;
	border-radius: 3px;
	padding: var(--greyd-gap-tiny);
	gap: var(--greyd-gap-tiny);
	transition: all .2s ease;
}

.greyd-card:hover {
	border-color: #cdcdcd;
}

.greyd-card > * {
	margin: 0;
}

.greyd-card--title {
	font-size: 1em;
	font-weight: 400;
	color: var(--wp-admin-color-dark);
}

.greyd-card--desc {
	font-size: 1em;
	font-weight: 400;
	color: var(--wp-admin-color-medium);
	flex-grow: 1;
}

.greyd-card a {
	font-weight: 500;
}

.greyd-card a:not(:hover) {
	text-decoration: none;
}

.greyd-card a:not(:last-child) {
	margin-right: var(--greyd-gap-tiny);
}

.greyd-card a:not(:first-child) {
	color: var(--wp-admin-color-medium);
}

.greyd-card-grid + h2 {
	margin-top: 4em;
}

.greyd-card-grid ~ .greyd-card-grid {
	margin-top: 2em;
}


/**
  * =================================================================
  *                          Greyd Features
  * =================================================================
  */

.greyd-dashboard.greyd-features {
	grid-template-columns: 1fr;
}

.greyd-features h1 {
	margin-bottom: 1em;
}

.greyd-feature {
	display: flex;
	flex-direction: row;
	padding: var(--greyd-gap-small);
}

.greyd-feature:hover:not(:has(input[disabled])) {
	border-color: var(--wp-admin-color-dark);
}

.greyd-feature:not(:has(input:checked)) {
	background-color: rgb(255, 255, 255, .3);
}

.greyd-feature:has(input[disabled]) {
	cursor: default;
}

.greyd-feature .greyd-card--title {
	font-size: 1.25em;
	margin: 0;
}

.greyd-feature .components-form-toggle {
	margin-top: 2px;
}

.greyd-card--info {
	display: inline-flex;
	align-items: center;
	background-color: rgba(0, 0, 0, .05);
	border-radius: 50px;
	padding: 2px 8px 2px 2px;
	gap: 8px;
	margin: 0;
	font-size: 10px;
}

/* orange styling  */
.greyd-card--info.orange {
    color: #E1822E;
    background: rgba(242, 153, 74, .2);
}

.greyd-feature[data-disabled="true"] {
	opacity: .75;
	pointer-events: none;
	border-style: dashed;
	background: transparent !important;
}

.greyd-feature[data-disabled="true"] .components-form-toggle {
	visibility: hidden;
}


/**
  * =================================================================
  *                          Greyd Settings
  * =================================================================
  */
.settings_wrap > form,
.settings_wrap .flex-wrap > form {
	max-width: 860px;
	width: 100%;
}

body.greyd-suite_page_greyd_settings h2,
body.greyd-suite_page_advanced_search h2 {
	margin-top: 2.5em;
}

.settings_wrap textarea {
	display: block;
	width: 100%;
}

/* Form Table */
.settings_wrap .form-table small {
	font-weight: normal;
	display: inline-block;
	padding-top: 7px;
	margin-bottom: 10px;
}

.settings_wrap .form-table td label {
	display: inline-block;
	margin-bottom: 4px;
}

.settings_wrap .form-table td fieldset label,
.settings_wrap .form-table td label[for] {
	margin: -8px -8px 10px !important;
	padding: 8px;
	border-radius: 4px;
}

.settings_wrap .form-table td label[for]:hover {
	background: #eaeaea;
}

.settings_wrap .form-table td fieldset label input,
.settings_wrap .form-table td label[for] input {
	margin-top: -2px;
}

.settings_wrap .form-table label[for] small {
	margin-left: 24px;
	margin-bottom: 0px;
}

.settings_wrap .form-table .inner_option {
	margin-left: 30px;
	margin-bottom: 4px;
}

/* Hide Autoptimize Admin-Notice */
.notice[data-dismissible^="ao-img-opt"] {
	display: none !important;
}

.settings_wrap .form-table table.widefat th,
.settings_wrap .form-table table.widefat td {
	padding: 8px 10px;
	vertical-align: top;
}


/**
  * =================================================================
  *                          Post Export/Import
  * =================================================================
  */

/* overlay inner content */
.greyd_overlay .inner_content {
	background-color: #fbfbfb;
	margin: -4px -30px;
	padding: 20px 30px 10px;
	border-top: 1px solid #d0d0d0;
	border-bottom: 1px solid #d0d0d0;
	max-height: 300px;
	overflow: auto;
}

.greyd_overlay .inner_content > :last-child {
	margin-bottom: 0;
}

.greyd_overlay .inner_content + .greyd_info_box {
	margin: 20px 0 0;
}

/* file input */
.greyd_overlay input[type="file"] {
	opacity: 0;
	position: absolute;
	z-index: -1;
	width: 100%;
}

/* loading escape button */
.greyd_overlay a.escape {
	float: right;
}

.greyd_overlay a.escape:not(:hover) {
	text-decoration: none;
}

/* Conflicts */
.greyd_overlay .conflicts .inner_content > div {
	display: flex;
	justify-content: space-between;
	padding: 10px 0;
	align-items: center;
	border-bottom: 1px solid #d0d0d0;
}

.greyd_overlay .conflicts .inner_content > div:first-child {
	margin-top: -15px;
}

.greyd_overlay .conflicts .inner_content > div:last-child {
	border-bottom: 0;
	margin-bottom: -5px;
}

.greyd_overlay .conflicts .inner_content > div a:not(:hover) {
	color: inherit;
	text-decoration: none;
}

/* multioption */
.greyd_overlay .conflicts .inner_content .multioption {
	background: rgba(0, 0, 0, .05);
	padding: 7px 30px;
	margin: -20px -30px 0 -30px !important;
}

.greyd_overlay .conflicts .inner_content .multioption > span {
	font-size: 0.9em;
	font-weight: 600;
}

.greyd_overlay .conflicts .inner_content .multioption > select {
	min-height: 20px;
	line-height: 1.6;
}


/**
  * =================================================================
  *                          Greyd Connections
  * =================================================================
  */

/* new feature highlight */
.feature-tag {
	display: inline-block;
	font-size: 11px;
	line-height: 1.4;
	padding: 0 3px;
	border-radius: 2px;
	background: #9b51e0;
	color: #fff;
}


/**
  * Connections page
  */
form.add_connection {
	max-width: 600px;
	margin-top: 1em;
}

form.add_connection label {
	display: inline-block;
	margin-bottom: 5px;
}

form.add_connection input {
	line-height: 38px;
	flex: 2;
	margin-right: 5px;
}

.gc_connection_options label {
	display: block;
	margin: 0 0 6px;
}

.gc_connection_options .button::after {
	content: attr(data-text);
}

.gc_connection_options .button.loading::after {
	content: attr(data-text_loading);
}

.gc_connection_options .button.success::after {
	content: attr(data-text_success);
}

.gc_connection_options .button.fail::after {
	content: attr(data-text_fail);
}


/**
  * =================================================================
  *                          Greyd Overlay V2
  *                          
  *                          Template Library & Hub Wizard
  * =================================================================
  */
.greyd_overlay_v2 {
	--overlay-padding: 32px;
	--animation-time: .2s;
	position: fixed;
	top: 100%;
	left: 0;
	right: 0;
	height: 100%;
	z-index: 9990;
}

.greyd_overlay_v2.is-active {
	top: 0;
	transition: top var(--animation-time) ease;
}

.greyd_overlay_v2 .overlay_bg {
	background: rgba(0, 0, 0, 0);
}

.greyd_overlay_v2.is-active .overlay_bg {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, .35);
	transition: background var(--animation-time) ease;
}

.greyd_overlay_v2 .overlay_popup {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	background: #fff;
	border-radius: 2px;
	box-shadow: 0 10px 10px rgb(0 0 0 / 25%);
	overflow: hidden;
	-webkit-transition: all 0.2s ease;
	transition: all 0.2s ease;

	margin: 5vh auto;
	height: 90vh;
	width: 90vw;
}

.greyd_overlay_v2.small .overlay_popup {
	width: 50vw;
}

/* head */
.overlay_head {
	position: relative;
	width: 100%;
	background: #fff;
	box-shadow: inset 0 -1px 0 0 var(--wp-admin-color-light);
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

.overlay_head > h1,
.overlay_head > h2,
.overlay_head > h3,
.overlay_head > h4,
.overlay_head > h5,
.overlay_head > h6 {
	margin: 0 0 -5px var(--overlay-padding);
}

/* icon */
.overlay_icon img {
	width: 30px;
	margin: 0 0 -5px var(--overlay-padding);
	-webkit-transition: all 0.2s ease;
	transition: all 0.2s ease;
}

/* close */
.overlay_close {
	cursor: pointer;
	position: relative;
	font-size: 20px;
	height: 1em;
	width: 1em;
	padding: 1em var(--overlay-padding);
	transition: background .2s ease;
}

.overlay_close:hover {
	color: var(--wp-admin-theme-color);
	background: rgba(0, 0, 0, .03);
}

.overlay_close::before {
	font-size: 1em;
	line-height: 1em;
}

/* content */
.overlay_content {
	position: relative;
	width: 100%;
	flex: 1 1 100%;
	overflow-x: hidden;
	overflow-y: auto;
	background: #fff;
	display: flex;
	flex-direction: row;
	align-items: stretch;
}

.overlay_inner_content {
	padding: var(--overlay-padding);
	box-sizing: border-box;
	width: 100%;
}

/* sidebar */
.overlay_sidebar,
.greyd_overlay_v2.has-sidebar .overlay_icon {
	flex: 0 0 16%;
	max-width: 250px;
}

.overlay_sidebar {
	box-shadow: 1px 0 0 0 var(--wp-admin-color-light);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: var(--overlay-padding);
	box-sizing: border-box;
	z-index: 1;
}

/* foot */
.overlay_foot {
	position: relative;
	width: 100%;
	flex: 0 0 0px;
	background: #fff;
	box-shadow: inset 0 1px 0 0 var(--wp-admin-color-light);
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
}


/**
  * Block styled tabs
  */
.block_tabs {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	justify-content: flex-start;
}

.block_tab {
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 0 32px;
	font-weight: 500;
	color: var(--wp-admin-color-dark);
	text-decoration: none;
	pointer-events: all;
	cursor: pointer;
	transition: background .2s ease;
}

.block_tab:hover,
.block_tab:focus {
	background-color: rgba(0, 0, 0, .03);
}

.block_tab:focus:not(.active) {
	box-shadow: none;
}

.block_tab.active {
	box-shadow: inset 0 -4px 0 0 var(--wp-admin-theme-color);
}