@keyframes pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  }
  50% {
    transform: scale(1.1);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  }
}

@keyframes pulsate {
	0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
	50% {opacity: 1.0;}
	100% {-webkit-transform: scale(1.2, 1.2); opacity: 0.0;}
}

@keyframes opacityPulse {
	0% {opacity: 0.0;}
	50% {opacity: 1.0;}
	100% {opacity: 0.0;}
}

.pulse {
  animation: pulse 0.5s ease-in-out;
}

@keyframes hilight {
  50% {
		filter: brightness(3);
		transform: scale(1.01);
	}
}

.highlight {
  animation: hilight 0.5s ease-in-out
}

.display-none {
	opacity: 0;
	display: none;
	height: 0 !important;
	padding: 0 !important;
}
.position-absolute-center {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.visibility-hidden {
	visibility: hidden;
	opacity: 0;
}

.visibility-none {
	visibility: hidden;
	opacity: 0;
	height: 0 !important;
	padding: 0 !important;
}

.is-inline {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	* {
		margin: 0;
	}
}

.copy-to-clipboard {
	display: flex;
  align-items: center;
  gap: 2px;
	svg {
		cursor: pointer;
		&:hover {
			filter: brightness(3);
		}
	}
}

.is-pending {
	opacity: 0.5;
}

.wp-block-site-logo img.custom-logo {
	@media (prefers-color-scheme: light) {
		filter: brightness(0.4) saturate(1.1) contrast(1.2) hue-rotate(210deg);
	}
	@media (prefers-color-scheme: dark) {
		filter: invert(25%) sepia(80%) saturate(700%) hue-rotate(190deg) brightness(95%) contrast(100%);
	}
}

.wpcloud-block-table-cell--wrapper {
	white-space: nowrap;
}

.wp-block-wpcloud-nav  {
	li {
		white-space: nowrap;
		display: flex;
		align-items: center;
		* {
			color: inherit;
			margin: 0;
		}
	}
	a.current {
		text-decoration: underline;
	}
	a.is-icon-only {
		padding-left: 0;
		display: flex;
		align-items: center;
	}
}

.wp-block-wpcloud-card {
	header, footer {
		* {
			color: inherit;
			margin: 0;
		}
	}
}

button[type=submit].wpcloud-block-button {
	width: fit-content;
	&:has(.wpcloud-block-button__spinner) {
		opacity: 1;
	}
}

.wp-block-wpcloud-dropdown {
	summary {
		display: flex;
    justify-content: space-between;
    align-items: center;
		* {
			margin: 0;
		}
		svg {
			&:hover {
				filter: brightness(3);
			}
		}
	}
	border: none;
	&.hide-chevron  {
		::after {
			display: none;
		}
	}

	&.open-right {
		ul {
			right: 0;
			left: unset;
		}
	}

	li {
		/* squash the spacing if the li has *any* hidden content */
		&:where(:has(*.display-none)) {
			margin: 0;
			padding: 0;
		}
	}
}

button.wpcloud-block-button {
	border: 1px solid transparent;
  background-clip: padding-box;
}

.wpcloud-block-button {
	cursor: pointer;
}

.wpcloud-block-form {
	input:read-only, textarea:read-only {
		background-color: transparent;
		border: none;
	}

	&.is-inline:not(.display-none) {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;

		.wpcloud-block-form-input__label, .wpcloud-block-form-input__input, .wpcloud-block-form-input__label-text {
			margin: 0;
		}
		.wpcloud-block-form-input__label {
			padding-top: 0;
			padding-bottom: 0;
		}
		.wpcloud-block-form-input__label.is-label-inline .wpcloud-block-form-input__label-text {
			margin-bottom: 0;
		}
	}

	.wpcloud-block-button {
		margin-bottom: 0;
	}
}

.wpcloud-form-message {
	&:not(.display-none) {
		display: flex;
	}
	align-items: center;
	justify-content: space-between;
	.dismiss {
		cursor: pointer;
		fill: currentColor;
		&:hover {
			filter: brightness(3);
		}
	}
	p {
		margin: 0;
		color: inherit;
	}
}

.add-site-alias--input {
	width: 100%;
}

.wp-block-group-is-layout-flex:not(.is-vertical) {
		* {
			margin-top: 0;
			margin-bottom: 0;
		}
}

.wpcloud-block-site-alias-list__row {
	.wp-block-wpcloud-form.is-inline {
		justify-content: start;
		gap: 20px;
	}
}

.wpcloud-block-form-input--password {
	input {
		box-shadow: -5px 0 10px rgba(0, 0, 0, 0.1), 0 5px 10px rgba(0, 0, 0, 0.1);
		border-right: 0;
	}
	input:focus ~ .wpcloud-block-form-input--toggle-hidden {
		background-color: var(--pico-form-element-active-background-color);
		border-color: var(--pico-form-element-active-border-color);
	}

	.wpcloud-block-form-input--toggle-hidden {
		all: unset;
		box-sizing: border-box;
		display: flex;
		justify-content: center;
		align-items: center;

		border: var(--pico-border-width) solid var(--pico-form-element-border-color);
		border-top-right-radius: var(--pico-border-radius);
		border-bottom-right-radius: var(--pico-border-radius);
		border-left: 0;
    inset: 0;
    height: calc(1rem* var(--pico-line-height) + var(--pico-form-element-spacing-vertical)* 2 + var(--pico-border-width)* 2);
		width: calc(1rem* var(--pico-line-height) + var(--pico-form-element-spacing-vertical)* 2 + var(--pico-border-width)* 2);
    background-color: var(--pico-form-element-background-color);
    transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
		&:hover {
			background-color: var(--pico-form-element-active-background-color);
		}

		svg {
			fill: currentColor;
			width: 30px;
			height: 30px;
		}
	}
}

.wpcloud-metrics-toolbar {
	display: flex;
	gap: 20px;

	.wpcloud-metrics-toolbar__range-picker {
		flex:1;
	}
	.wpcloud-metrics-toolbar__refresh {
		/* Match the pico details > summary height */
		height: calc(1rem* var(--pico-line-height) + var(--pico-form-element-spacing-vertical)* 2 + var(--pico-border-width)* 2);
	}

}

.wpcloud-metrics-datetime-picker__controls {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	.wpcloud-metrics-datetime-picker__options {
		width: 80%;
	}
	.wpcloud-metrics-datetime-picker__inputs {
		width: 100%;
		.wpcloud-metrics-datetime-picker__refresh {
			margin-top: 20px;
			width: 100%;
			display: flex;
			justify-content: flex-end;
		}
	}
	small {
		grid-column: 2;
		grid-row: 2;
		margin: 3px 0;
	}
}
.wpcloud-datepicker {
	position: absolute;
	padding: 20px;
	background: var(--pico-color);
	border-radius: var(--pico-border-radius);
	button.components-datetime__date__day {
		padding: 0;
		font-size: 0.8rem;
		border: none;
		color: rgb(30, 30, 30);
		background-color: transparent;
	}
	&:has(div div) div div {
		button {
			display: flex;
			background: transparent;
			padding: 0 14px;
			margin: 0;
			box-shadow: none;
			border: var(--pico-border-width) solid var(--pico-form-element-border-color);
		}
	}
}

.wpcloud-metrics-input {
	position: relative;
	label {
		display: grid;
		grid-template-columns: 13% 1fr 10%;
		gap: 10px;
		justify-items: center;
		align-items: center;
	}
	input {
		margin-bottom: 0 !important;
	}

	.wpcloud-datepicker {
		left : calc(13% + 10px);
		z-index: 10;
	}
}
/* @TODO : This should use the spacing styles in from the editor */
.wpcloud-graph {
	margin: 20px 0;
}

.wp-block-site-logo.hero-logo {
	display: flex;
	margin: 0 20px;
	a {
		flex-grow: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		img {
			width: 100%;
			max-width: 550px;
			height: auto;
		}
	}
}

/* @TODO - A multi-line legend causes the block to constantly render and grow in size.
.u-legend {
	max-height: 30px;
	overflow: hidden;
}
*/
/* collapse graph grids to columns when below 1200px */
@media (max-width: 1200px) {
	.wpcloud-metrics__graphs .wp-block-group-is-layout-grid.is-layout-grid {
		display:flex;
		flex-direction: column;
	}
}