/**
 * Symboltangentbord för direktsvarsrutan i gamla provsystemet.
 *
 * Fristående med flit: gamla provläget kör Bootstrap 3 och Inspinia, medan
 * förlagan i Dashkit bygger på Bootstrap 4:s card, input-group-merge och
 * btn-light. Inget av det finns här, så allt som behövs definieras nedan.
 */

/* Fältet och symbolknappen sitter ihop som en enhet, i full bredd.
   flex, inte block: som blockelement bestäms gruppens höjd av radboxen kring
   inline-fältet, och den blir högre än fältet när omgivningen har stor
   line-height (exam-restyle sätter 1.7). Symbolknappen sträcker sig över
   gruppens höjd och blev då högre än rutan. Med flex finns ingen radbox —
   gruppens höjd är exakt fältets. */
.we-kb-group
{
	display: flex;
	align-items: stretch;
	position: relative;
	width: 100%;
	max-width: 100%;

	/* Föräldern (.we-question-precis-text-input) är också flex. Utan detta
	   sträcks gruppen till radens höjd, som sätts av "Svar:"-etiketten med
	   line-height 1.7 — och symbolknappen, som spänner över gruppens höjd,
	   blev då högre än fältet både uppåt och nedåt. */
	align-self: center;

	/* Fältets bottenmarginal flyttas hit, se kommentaren vid margin-bottom: 0
	   nedan. Avståndet till nästa fråga blir därmed oförändrat. */
	margin-bottom: 20px;
}

/* Svarsfältet fyller raden. wp-education.css sätter width: 320px för
   input[type="text"] i provfrågor, med tre klasser i selektorn — den här måste
   därför vara minst lika djup för att gå före. Fältet begränsas i stället av
   sin container, som förut.

   Bredden spelar roll för mer än fältet: symbolknappen ligger absolut mot
   gruppens högerkant, och popoverns maxbredd räknas från fältets vänsterkant
   till knappens högerkant. Ett smalt fält gav därför ett avkortat tangentbord. */
.wp-education-question-content .wp-education-question-type .we-kb-group > input[data-we-kb-input]
{
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;
	padding-right: 46px;
	/* Marginalen nollas: gruppen omsluter fältets MARGINALruta, och knappen
	   ligger absolut med top/bottom 0 mot gruppen. Med 20px bottenmarginal blev
	   knappen alltså 20px högre än den synliga rutan. Avståndet finns kvar,
	   fast på gruppen. */
	margin-bottom: 0;
}

/* Utanför provkontexten, där 320px-regeln inte gäller. */
.we-kb-group > input[data-we-kb-input]
{
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;
	padding-right: 46px;
	margin-bottom: 0;
}

/* Knappen ligger absolut inuti fältet och tar därför exakt fältets höjd.
   Som flex-element bredvid fältet kunde den i stället bli HÖGRE än rutan —
   tecknen π² ger ett högt radutrymme på vissa enheter, och då växte hela
   gruppen efter knappen i stället för tvärtom. Det syntes på Android. */
.we-kb-toggle
{
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	width: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-left: 1px solid #e5e6e7;
	border-top-right-radius: 1px;
	border-bottom-right-radius: 1px;
	background-color: #f5f5f5;
	color: #333333;
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
	user-select: none;
	touch-action: manipulation;
}

.we-kb-toggle:hover
{
	background-color: #eceff1;
}

/* Samma blå som fältet får vid fokus (.form-control:focus i in-style.css),
   annars lyser knappens ram i en annan färg än rutan den sitter ihop med. */
.we-kb-group:focus-within .we-kb-toggle
{
	border-color: #2c7be5;
}

/* Själva popovern förankras i fältets wrapper: ovanför fältet, högerkanten i
   linje med symbolknappen. Ren CSS, ingen uträkning i JS — tidigare versioner
   räknade vyport-koordinater, vilket sköt popovern ur läge i helskärmsläge på
   vissa webbläsare. */
.we-kb-popover
{
	position: absolute;
	right: 0;
	bottom: calc(100% + 6px);
	/* Bredden i procent av gruppen, aldrig i pixlar. Frågeinnehållet har
	   zoom: 1.2 (wp-education.css), och getBoundingClientRect ger renderade
	   pixlar — sätter man dem som CSS-bredd skalas de upp en gång till, och
	   popovern blev 20% för bred och svämmade ut åt vänster. Procent är
	   immunt mot det. */
	width: max-content;
	max-width: 100%;
	z-index: 9999;
	background-color: #ffffff;
	border: 1px solid #e7eaec;
	border-radius: 4px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.we-kb-popover[hidden]
{
	display: none;
}

.we-kb-body
{
	/* Tajt med flit: varje pixel här är en pixel mindre för symbolerna, och
	   antalet som ryms per sida avgörs av just den bredden. */
	padding: 6px;
}

/* Rad som håller: [prev] [knappar] [next] */
.we-kb-row
{
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 4px;
	width: auto;
}

.we-kb-buttons
{
	display: flex;
	gap: 4px;
	justify-content: flex-start;
	/* Se kommentaren i .we-kb-body om varför avstånden hålls små. */
	/* Måste kunna krympa och dölja överskottet — render() jämför scrollWidth mot
	   clientWidth för att veta hur många knappar som ryms, och med flex: 0 0 auto
	   växer raden i stället och de två måtten blir alltid lika. */
	flex: 1 1 auto;
	min-width: 0;
	width: auto;
	overflow: hidden;
}

/* Symbolknapparna. Måste ha samma mått i mätelementet som i popovern,
   annars räknar sidbrytningen fel. */
.we-kb-key
{
	/* Får INTE krympa. Med flex-shrink: 1 (standard) klämmer knapparna ihop sig
	   i stället för att svämma över, och då blir scrollWidth lika med
	   clientWidth — render() ser aldrig att något inte får plats, visar ingen
	   pil, och overflow: hidden kapar den första knappen på mitten. */
	flex: 0 0 auto;
	padding: 2px 7px;
	font-size: 17px;
	line-height: 1.4;
	background-color: #f8f9fa;
	border: 1px solid #dee2e6;
	border-radius: 3px;
	color: #212529;
	white-space: nowrap;
	cursor: pointer;
}

.we-kb-key:hover
{
	background-color: #e9ecef;
}

.we-kb-arrow
{
	flex: 0 0 auto !important;
	padding: 2px 7px;
	font-size: 17px;
	line-height: 1.4;
	background-color: #2c7be5;
	border: 1px solid #2c7be5;
	border-radius: 3px;
	color: #ffffff;
	cursor: pointer;
}

.we-kb-arrow[hidden]
{
	display: none;
}

/* Utskrift: symbolknappen ska inte följa med på papper */
@media print
{
	.we-kb-toggle,
	.we-kb-popover
	{
		display: none !important;
	}

	.we-kb-group > input[data-we-kb-input]
	{
		border-radius: 1px;
	}
}