@import url('parent-back-arrows.css');

.invize-parent-back-arrow-picker {
	--invize-parent-back-picker-gap: 0.5rem;
	--invize-parent-back-picker-option-size: 3rem;
	--invize-parent-back-picker-arrow-scale: 1.35rem;
	--invize-parent-back-picker-border: #c3c4c7;
	--invize-parent-back-picker-selected: var(--wp-admin-theme-color, #2271b1);
	--invize-parent-back-picker-ink: #1d2327;
	--invize-parent-back-picker-surface: #fff;
}

.invize-parent-back-arrow-picker__options {
	display: flex;
	flex-wrap: wrap;
	gap: var(--invize-parent-back-picker-gap);
	margin-top: var(--invize-parent-back-picker-gap);
}

.invize-parent-back-arrow-picker__option.components-button {
	align-items: center;
	justify-content: center;
	min-width: var(--invize-parent-back-picker-option-size);
	width: var(--invize-parent-back-picker-option-size);
	height: var(--invize-parent-back-picker-option-size);
	padding: 0;
	font-size: var(--invize-parent-back-picker-arrow-scale);
	background: var(--invize-parent-back-picker-surface);
	border: 1px solid var(--invize-parent-back-picker-border);
	color: var(--invize-parent-back-picker-ink);
	box-shadow: none;
}

.invize-parent-back-arrow-picker__option.components-button:hover,
.invize-parent-back-arrow-picker__option.components-button:focus {
	background: var(--invize-parent-back-picker-surface);
	border-color: var(--invize-parent-back-picker-selected);
	color: var(--invize-parent-back-picker-ink);
	box-shadow: none;
}

.invize-parent-back-arrow-picker__option.components-button.is-selected,
.invize-parent-back-arrow-picker__option.components-button.is-selected:hover,
.invize-parent-back-arrow-picker__option.components-button.is-selected:focus {
	background: var(--invize-parent-back-picker-surface);
	border-color: var(--invize-parent-back-picker-selected);
	color: var(--invize-parent-back-picker-ink);
	box-shadow: 0 0 0 1px var(--invize-parent-back-picker-selected);
}

.invize-parent-back-arrow-picker .invize-parent-back__arrow {
	--invize-parent-back-arrow-size: 1em;
}