/* Canonical F80 Pickr layout. The vendor theme supplies behavior and base states. */
.pcr-app[data-theme="nano"] {
	width: 14.25em;
	max-width: calc(100vw - 16px);
	padding: .75em;
}

.pcr-app[data-theme="nano"] .pcr-selection {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: 1em 8em .5em .5em;
	gap: .6em;
	align-items: stretch;
	width: 100%;
	height: auto;
}

.pcr-app[data-theme="nano"] .pcr-selection .pcr-color-preview {
	grid-area: 1 / 1;
	display: block;
	width: 100%;
	height: 1em;
	margin: 0;
}

.pcr-app[data-theme="nano"] .pcr-selection .pcr-color-preview .pcr-last-color {
	display: none;
}

.pcr-app[data-theme="nano"] .pcr-selection .pcr-color-preview .pcr-current-color {
	width: 100%;
	height: 100%;
	border-radius: .15em;
}

.pcr-app[data-theme="nano"] .pcr-selection .pcr-color-palette {
	grid-area: 2 / 1;
	width: 100%;
	height: 100%;
}

.pcr-app[data-theme="nano"] .pcr-selection .pcr-color-chooser,
.pcr-app[data-theme="nano"] .pcr-selection .pcr-color-opacity {
	width: 100%;
	height: .5em;
	margin: 0;
}

.pcr-app[data-theme="nano"] .pcr-selection .pcr-color-chooser {
	grid-area: 3 / 1;
}

.pcr-app[data-theme="nano"] .pcr-selection .pcr-color-opacity {
	grid-area: 4 / 1;
}

.pcr-app[data-theme="nano"] .pcr-swatches,
.pcr-app[data-theme="nano"] .pcr-interaction {
	padding-right: 0;
	padding-left: 0;
}