/*
 * VEFdocsKit Pro — styles of the screens the add-on adds: the preview sheet, the stamp designer, the folders.
 * They use the variables of the page defined by VEFdocsKit (--_accent, --_border, --_gap…).
 */

@container vefdk (min-width: 52rem) {
	.vefdk-grid--sidebar { grid-template-columns: minmax(14rem, 1fr) minmax(0, 3fr); align-items: start; }
}

@container vefdk (min-width: 70rem) {
	.vefdk-grid--designer { grid-template-columns: minmax(12rem, 1fr) minmax(0, 3fr) minmax(14rem, 1.4fr); align-items: start; }
	.vefdk-grid--designer > :nth-child(2) { grid-column: 3; grid-row: 1; }
	.vefdk-grid--designer > :nth-child(3) { grid-column: 2; grid-row: 1; }
}

@container vefdk (min-width: 52rem) and (max-width: 69.99rem) {
	.vefdk-grid--designer { grid-template-columns: minmax(12rem, 1fr) minmax(0, 3fr); align-items: start; }
	.vefdk-grid--designer > :nth-child(2) { grid-column: 1 / -1; order: -1; }
}

@container vefdk (min-width: 52rem) {
	.vefdk-sticky { position: sticky; top: calc(var(--wp-admin--admin-bar--height, 0px) + 1rem); }
}

.vefdk-app .vefdk-button--danger { border-color: var(--_danger); color: var(--_danger); background: transparent; }

.vefdk-app .vefdk-button--danger:hover { background: color-mix(in srgb, var(--_danger) 12%, transparent); color: var(--_danger); }

/* Page preview */
.vefdk-sheet-wrap { display: flex; flex-direction: column; gap: .5rem; align-items: center; }
.vefdk-sheet {
	position: relative;
	width: min(100%, 22rem);
	background: #fff;
	border: 1px solid var(--_border);
	box-shadow: 0 .15rem .8rem rgba(0, 0, 0, .12);
	overflow: hidden;
	touch-action: none;
	color: #888;
}

.vefdk-sheet--landscape { width: min(100%, 30rem); }
.vefdk-sheet__lines { position: absolute; inset: 7% 8%; display: flex; flex-direction: column; gap: 2.2%; pointer-events: none; }
.vefdk-sheet__lines i { display: block; height: 1.1%; background: #dcdcdc; border-radius: 1px; }
.vefdk-sheet__lines i:nth-child(3n) { width: 70%; }
.vefdk-sheet__lines i:nth-child(4n) { width: 45%; }
.vefdk-sheet__stamp { position: absolute; cursor: grab; user-select: none; touch-action: none; line-height: 0; }
.vefdk-sheet__stamp:active { cursor: grabbing; }
.vefdk-sheet__stamp img { display: block; width: 100%; height: auto; pointer-events: none; }
.vefdk-sheet__stamp:focus-visible { outline: 1px dashed var(--_accent); outline-offset: 2px; }

.vefdk-checker {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 9rem;
	padding: 1rem;
	border: 1px solid var(--_border);
	border-radius: var(--_radius);
	background: repeating-conic-gradient(#f2f2f2 0% 25%, #fff 0% 50%) 50% / 16px 16px;
}

.vefdk-checker img { max-width: 100%; height: auto; }

.vefdk-list__main { min-width: 0; flex: 1 1 10rem; text-align: left; background: none; border: 0; color: inherit; font: inherit; cursor: pointer; padding: 0; }

.vefdk-chip {
	display: inline-block;
	padding: .1em .6em;
	border: 1px solid var(--_border);
	border-radius: 99px;
	font-size: var(--vefdk-fs-small);
	background: none;
	color: inherit;
	font-family: inherit;
}

button.vefdk-chip { cursor: pointer; }
.vefdk-chip[aria-pressed="true"] { background: var(--_accent); border-color: var(--_accent); color: var(--_accent-ink); }
.vefdk-chips { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }

.vefdk-example { font-weight: 600; }

.vefdk-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.vefdk-line { margin: 0 0 var(--_gap); padding: calc(var(--_gap) * .75); border: 1px solid var(--_border); border-radius: var(--_radius); }
.vefdk-line__head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .5rem; }
.vefdk-line__head .vefdk-actions { margin: 0; }
.vefdk-range { display: flex; align-items: center; gap: .5rem; }
.vefdk-range input { flex: 1 1 auto; min-width: 0; }
.vefdk-range output { min-width: 3.5em; text-align: right; }
.vefdk-chips { margin: 0 0 .6rem; }
.vefdk-linklike { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.vefdk-linklike:hover strong,
.vefdk-linklike:focus-visible strong { color: var(--_accent); text-decoration: underline; }


.vefdk-fields + p { margin-top: var(--_gap); }
.vefdk-line > div > h3:first-child { margin-top: 0; }