/* FLAG EDITOR — scopé sous .flag-editor */

.flag-editor
{
	user-select:none;
	display:grid;
	grid-template-columns:minmax(190px, 300px) minmax(280px, 1fr);
	gap:1em;
	align-items:start;

	padding:1em;
	border:1px solid var(--line);
	border-radius:.3rem;
	background:linear-gradient(180deg, var(--theme), rgba(0,25,50,.35));
	box-sizing:border-box;
}

/*
	Le canvas à gauche,
	les paramètres à droite,
	les actions en dessous.
*/

.flag-stage
{
	position:relative;
	grid-column:1;
	grid-row:1 / span 8;

	width:100%;
	aspect-ratio:1;
	max-width:300px;

	background:#000;
	border:1px solid var(--inline);
	border-radius:.3rem;
	box-shadow:0 0 0 1px rgba(0,0,0,.45), inset 0 0 2em rgba(0,0,0,.5);
	overflow:hidden;
	box-sizing:border-box;
}

.flag-stage canvas
{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
}

.flag-stage .flag-cursor
{
	position:absolute;
	width:19px;
	height:19px;
	border:2px solid var(--here);
	border-radius:50%;
	box-shadow:0 0 0 1px rgba(0,0,0,.5), 0 0 .7em var(--here);
	transform:translate(-50%,-50%);
	pointer-events:none;
	opacity:.5;
	display:none;
}

/*
	Lignes de paramètres
*/

.flag-row
{
	grid-column:2;

	min-height:54px;
	margin:0;
	padding:.55em .65em;

	border-radius:.25rem;
	background:rgba(0,40,80,.45);
	border:1px solid var(--line);

	display:grid;
	grid-template-columns:
		6.8em   /* type: Back / Shape / Logo / FX */
		5.8em   /* couleur 1 / couleur */
		5.8em   /* couleur 2 / angle */
		4.8em   /* turn / flip */
		4.8em   /* spin */
		6.2em;  /* zoom / alpha */;

	align-items:center;
	column-gap:.45em;

	box-sizing:border-box;
	transition:background .12s, border-color .12s;
}

.flag-row:hover
{
	background:var(--theme);
	border-color:var(--inline);
}

.flag-row.alt
{
	background:rgba(0,80,160,.45);
}

.flag-row.alt:hover
{
	background:var(--high);
}

.flag-group
{
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	min-width:0;
}

.flag-group-label
{
	color:var(--here);
	font-size:82%;
	line-height:1.1em;
	font-weight:400;
	text-transform:uppercase;
	letter-spacing:.03em;
	margin-bottom:.35em;
	opacity:.95;
	white-space:nowrap;
}

.flag-group-line
{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:.25em;
	min-height:2.1em;
}

/*
	Boutons internes
*/

.flag-btn,
.flag-chip,
.flag-palette-choice
{
	border:1px solid var(--line);
	border-radius:.2rem;
	background:rgba(0,0,0,.25);
	color:white;
	cursor:pointer;
	box-sizing:border-box;
	font-family:inherit;
	transition:background .1s, border-color .1s, opacity .1s;
}

.flag-btn
{
	min-width:2.25em;
	height:2.25em;
	padding:0 .6em;
	font-size:105%;
	line-height:2.1em;
	text-align:center;
}

.flag-btn:hover,
.flag-chip:hover,
.flag-palette-choice:hover
{
	background:var(--high);
	border-color:var(--here);
}

.flag-btn:active,
.flag-chip:active,
.flag-palette-choice:active
{
	transform:translate(1px,1px);
}

.flag-btn-clear
{
	min-width:1.4em;
	height:1.4em;
	padding:0;

	border:none;
	border-radius:.2rem;
	background:transparent;

	color:var(--bad);
	font:700 80%/1.4em inherit;
	cursor:pointer;
}

.flag-btn-clear:hover
{
	background:var(--red);
	color:white;
}

/*
	Chips couleur
*/

.flag-chip,
.flag-palette-choice
{
	width:2.25em;
	height:2.25em;
	padding:.25em;

	display:flex;
	align-items:center;
	justify-content:center;

	box-sizing:border-box;
	border:1px solid var(--line);
	border-radius:.2rem;
	background:rgba(0,0,0,.25);

	cursor:pointer;
	transition:background .1s, border-color .1s;

	appearance:none;
	-webkit-appearance:none;
	font:inherit;
	line-height:1;
}

.flag-chip:hover,
.flag-palette-choice:hover
{
	background:var(--high);
	border-color:var(--here);
}

.flag-chip span,
.flag-palette-choice span
{
	display:block;
	width:100%;
	height:100%;

	box-sizing:border-box;
	border-radius:.15rem;
	border:1px solid rgba(255,255,255,.2);
	box-shadow:inset 0 0 .6em rgba(0,0,0,.35);
}

/*
	Palette
*/

.flag-palette
{
	grid-column:2;

	min-height:48px;
	margin:0;
	padding:.55em .65em;

	border-radius:.25rem;
	background:rgba(0,25,50,.55);
	border:1px solid var(--inline);

	display:none;
	align-items:center;
	gap:.45em;

	box-sizing:border-box;
}

.flag-palette.visible
{
	display:flex;
}

.flag-palette-label
{
	width:4.5em;
	text-align:left;
	font-size:70%;
	font-weight:300;
	text-transform:uppercase;
	color:var(--here);
	letter-spacing:.04em;
}

/*
	Actions sous tout le bloc
*/

.flag-actions
{
	grid-column:1 / -1;

	display:flex;
	align-items:center;
	justify-content:flex-end;
	gap:.5em;

	margin-top:.25em;
	padding-top:.75em;
	border-top:1px solid var(--line);
}

.flag-actions a
{
	display:inline-block;
	padding:.5em .75em;
	margin:0;

	background-color:var(--button);
	color:var(--black);

	border-radius:.2rem;
	font-size:85%;
	line-height:1.4em;
	text-transform:uppercase;
	letter-spacing:.03em;
	text-decoration:none;

	cursor:pointer;
}

.flag-actions a:hover
{
	opacity:.85;
}

.flag-actions a.flag-reset
{
	background-color:var(--theme);
	color:var(--bad);
	border:1px solid var(--line);
}

.flag-actions a.flag-ok
{
	background-color:var(--high);
	color:var(--good);
	border:1px solid var(--inline);
}

.flag-actions a.flag-ok.loading
{
	color:white;
}

/*
	Alignement du premier groupe :
	Back n'a pas de bouton X, mais on réserve quand même la 3e case.
*/

.flag-row .flag-group:first-child .flag-group-line
{
	display:grid;
	grid-template-columns:2.25em 2.25em 1.4em;
	gap:.25em;
	align-items:center;
	justify-content:center;
}

.flag-row .flag-group:first-child .flag-btn:nth-child(1)
{
	grid-column:1;
}

.flag-row .flag-group:first-child .flag-btn:nth-child(2)
{
	grid-column:2;
}

.flag-row .flag-group:first-child .flag-btn-clear
{
	grid-column:3;
	justify-self:center;
}

/* Back : case X fantôme pour garder le même alignement que Shape/Logo/FX */
.flag-row[data-flag-menu="1"] .flag-group:first-child .flag-group-line::after
{
	content:"";
	display:block;
	grid-column:3;
	width:1.4em;
	height:1.4em;
}

/* BACK :
   1 Back, 2 Couleur 1, 3 Couleur 2, 4 Turn
*/
.flag-row[data-flag-menu="1"] .flag-group:nth-child(1){ grid-column:1; }
.flag-row[data-flag-menu="1"] .flag-group:nth-child(2){ grid-column:2; }
.flag-row[data-flag-menu="1"] .flag-group:nth-child(3){ grid-column:3; }
.flag-row[data-flag-menu="1"] .flag-group:nth-child(4){ grid-column:4; }

/* SHAPE :
   1 Shape, 2 Couleur, 3 Turn, 4 Zoom
*/
.flag-row[data-flag-menu="2"] .flag-group:nth-child(1){ grid-column:1; }
.flag-row[data-flag-menu="2"] .flag-group:nth-child(2){ grid-column:2; }
.flag-row[data-flag-menu="2"] .flag-group:nth-child(3){ grid-column:4; }
.flag-row[data-flag-menu="2"] .flag-group:nth-child(4){ grid-column:6; }

/* LOGO 1 / LOGO 2 :
   1 Logo, 2 Couleur, 3 Angle, 4 Flip, 5 Spin, 6 Zoom
*/
.flag-row[data-flag-menu="3"] .flag-group:nth-child(1),
.flag-row[data-flag-menu="4"] .flag-group:nth-child(1){ grid-column:1; }

.flag-row[data-flag-menu="3"] .flag-group:nth-child(2),
.flag-row[data-flag-menu="4"] .flag-group:nth-child(2){ grid-column:2; }

.flag-row[data-flag-menu="3"] .flag-group:nth-child(3),
.flag-row[data-flag-menu="4"] .flag-group:nth-child(3){ grid-column:3; }

.flag-row[data-flag-menu="3"] .flag-group:nth-child(4),
.flag-row[data-flag-menu="4"] .flag-group:nth-child(4){ grid-column:4; }

.flag-row[data-flag-menu="3"] .flag-group:nth-child(5),
.flag-row[data-flag-menu="4"] .flag-group:nth-child(5){ grid-column:5; }

.flag-row[data-flag-menu="3"] .flag-group:nth-child(6),
.flag-row[data-flag-menu="4"] .flag-group:nth-child(6){ grid-column:6; }

/* FX :
   1 FX, 2 Turn, 3 Alpha
*/
.flag-row[data-flag-menu="5"] .flag-group:nth-child(1){ grid-column:1; }
.flag-row[data-flag-menu="5"] .flag-group:nth-child(2){ grid-column:4; }
.flag-row[data-flag-menu="5"] .flag-group:nth-child(3){ grid-column:6; }



/*
	Responsive : sur petit écran,
	l'Étendard repasse au-dessus des réglages.
*/

@media (max-width: 1050px)
{
	.flag-row
	{
		grid-template-columns:
			6.2em
			5.4em
			5.4em
			4.4em
			4.4em
			5.8em;
		column-gap:.3em;
	}

	.flag-group-label
	{
		font-size:78%;
	}
}

@media (max-width: 760px)
{
	.flag-row
	{
		display:flex;
		flex-wrap:wrap;
		gap:.45em .8em;
	}

	.flag-group
	{
		min-width:4.8em;
	}
}