// The Style tab (editor only). Logical properties only: the tab flips in a right-to-left admin.

.pbsw-design {
	padding-block-end: 8px;
}

.pbsw-design-switcher {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 12px 16px;
	border-block-end: 1px solid #e0e0e0;
	position: sticky;
	inset-block-start: 0;
	z-index: 2;
	background: #fff;

	&__bps {
		display: flex;
		flex-wrap: wrap;
		gap: 4px;

		.components-button {
			position: relative;

			&.has-values::after {
				content: "";
				position: absolute;
				inset-block-start: 3px;
				inset-inline-end: 3px;
				inline-size: 6px;
				block-size: 6px;
				border-radius: 50%;
				background: var(--wp-admin-theme-color, #3858e9);
			}
		}
	}

	&__reset {
		align-self: flex-start;
	}
}

.pbsw-design-prop {
	position: relative;
	margin-block-end: 16px;

	&.is-set > :first-child {
		// A value set at THIS breakpoint is marked on the leading edge (build/*-rtl.css flips it).
		box-shadow: inset 2px 0 0 var(--wp-admin-theme-color, #3858e9);
		padding-inline-start: 8px;
	}

	&.is-inherited {
		input,
		select,
		.components-toggle-group-control {
			color: #757575;
		}
	}

	&__meta {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 8px;
		min-block-size: 0;
	}

	&__from {
		font-size: 11px;
		color: #757575;
		font-style: italic;
	}
}

.pbsw-design-length {
	&__row {
		display: flex;
		align-items: flex-end;
		gap: 4px;
	}

	&__input {
		flex: 1;
		min-inline-size: 0;
	}
}

.pbsw-design-sides {
	border: 0;
	padding: 0;
	margin: 0;

	&__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-block-end: 8px;
	}

	&__legend {
		font-size: 11px;
		font-weight: 500;
		text-transform: uppercase;
		padding: 0;
	}

	&__grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 8px;
	}
}

.pbsw-design-border,
.pbsw-design-shadow,
.pbsw-design-transition,
.pbsw-design-hide {
	border: 0;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.pbsw-design-shadow__layer {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 8px;
	border: 1px solid #e0e0e0;
	border-radius: 2px;
}

.pbsw-design-swatch {
	display: inline-block;
	inline-size: 20px;
	block-size: 20px;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
	flex: none;

	&.is-empty {
		background:
			linear-gradient(-45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%);
	}
}

.pbsw-design-color__toggle.components-button {
	inline-size: 100%;
	gap: 8px;
	box-shadow: inset 0 0 0 1px #949494;

	.is-inherited {
		color: #757575;
	}
}

.pbsw-design-color__popover {
	padding: 16px;
	inline-size: 260px;
}

.pbsw-design-token__row {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.pbsw-design-bgimage {
	&__pick {
		display: flex;
		align-items: center;
		gap: 8px;
		margin-block-end: 12px;
	}

	&__preview {
		border: 0;
		padding: 0;
		cursor: pointer;
		background: none;

		img {
			display: block;
			inline-size: 120px;
			block-size: 72px;
			object-fit: cover;
			border-radius: 2px;
		}
	}
}

.pbsw-design-span {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.pbsw-design-grid-template {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;

	> :first-child {
		align-self: stretch;
	}
}