/**
 * General purpose styles
 */

.hidden {
	display: none !important;
}

fieldset legend {
	font-size: 1rem;
}

table caption {
	font-weight: bold;
}

/* Disabled button styles (TODO: move to site-wide styles) */
.il-button.il-blue:disabled,
.il-button:disabled {
	--il-button-background-color: light-dark(rgba(239, 239, 239, 0.3), rgba(19, 1, 1, 0.3));
	--il-button-foreground-color: light-dark(rgba(16, 16, 16, 0.3), rgba(255, 255, 255, 0.3));
	--il-button-border-color: light-dark(rgba(118, 118, 118, 0.3), rgba(195, 195, 195, 0.3));

	--il-focused-button-background-color: var(--il-button-background-color);
	--il-focused-button-foreground-color: var(--il-button-foreground-color);
	--il-focused-button-border-color: var(--il-button-border-color);

	cursor: not-allowed;
}

/**
 * Monty's Dilemma styles
 */

.monty-container {
	margin: 1em 0;
}

.monty-container > * {
	margin: 1em 0;
}

.monty-doors-container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	flex-grow: 0;
	gap: 1em;
}

.monty-doors-container:has(.monty-door:nth-child(n+10)) {
	font-size: 0.9em;
}
.monty-doors-container:has(.monty-door:nth-child(n+14)) {
	font-size: 0.8em;
}
.monty-doors-container:has(.monty-door:nth-child(n+18)) {
	font-size: 0.7em;
}
.monty-doors-container:has(.monty-door:nth-child(n+22)) {
	font-size: 0.65em;
}
.monty-doors-container:has(.monty-door:nth-child(n+26)) {
	font-size: 0.6em;
}
.monty-doors-container:has(.monty-door:nth-child(n+30)) {
	font-size: 0.55em;
}
.monty-doors-container:has(.monty-door:nth-child(n+34)) {
	font-size: 0.5em;
}
.monty-doors-container:has(.monty-door:nth-child(n+42)) {
	font-size: 0.45em;
}
.monty-doors-container:has(.monty-door:nth-child(n+52)) {
	font-size: 0.4em;
}
.monty-doors-container:has(.monty-door:nth-child(n+77)) {
	font-size: 0.35em;
}
.monty-doors-container:has(.monty-door:nth-child(n+102)) {
	font-size: 0.3em;
}
.monty-doors-container:has(.monty-door:nth-child(n+122)) {
	font-size: 0.35em;
}
.monty-doors-container:has(.monty-door:nth-child(n+142)) {
	font-size: 0.3em;
}
.monty-doors-container:has(.monty-door:nth-child(n+162)) {
	font-size: 0.25em;
}
.monty-doors-container:has(.monty-door:nth-child(n+182)) {
	font-size: 0.2em;
}
.monty-doors-container:has(.monty-door:nth-child(n+202)) {
	font-size: 0.15em;
}

/* .monty-doors-container:has(.monty-door:nth-child(n+18)) {
	font-size: 0.9em;
}
.monty-doors-container:has(.monty-door:nth-child(n+34)) {
	font-size: 0.8em;
}
.monty-doors-container:has(.monty-door:nth-child(n+50)) {
	font-size: 0.7em;
}
.monty-doors-container:has(.monty-door:nth-child(n+66)) {
	font-size: 0.6em;
}
.monty-doors-container:has(.monty-door:nth-child(n+82)) {
	font-size: 0.5em;
}
.monty-doors-container:has(.monty-door:nth-child(n+98)) {
	font-size: 0.4em;
}
.monty-doors-container:has(.monty-door:nth-child(n+114)) {
	font-size: 0.3em;
}
.monty-doors-container:has(.monty-door:nth-child(n+130)) {
	font-size: 0.2em;
}
.monty-doors-container:has(.monty-door:nth-child(n+202)) {
	font-size: 0.1em;
} */

/* Size doors according to parent for small and large numbers of doors */
.monty-doors-container .monty-door {
	font-size: 0.3em;
}
@media screen and (min-width: 480px) {
	.monty-doors-container .monty-door {
		font-size: 0.5em;
	}
}
@media screen and (min-width: 640px) {
	.monty-doors-container .monty-door {
		font-size: 0.75em;
	}
}
@media screen and (min-width: 800px) {
	.monty-doors-container .monty-door {
		font-size: 1em;
	}
}
/* .monty-doors-container:has(.monty-door:nth-child(n+12)) .monty-door {
	font-size: 0.5em;
}
.monty-doors-container:has(.monty-door:nth-child(n+202)) .monty-door {
	font-size: 1em;
} */


.monty-door {
	position: relative;
	text-align: center;
}

.monty-door input[type="radio"]:not(:checked),
.monty-door input[type="radio"]:checked {
	position: absolute;
	left: 0;
	opacity: 0.01;
}
/* .monty-door input {
	display: block;
	text-align: center;
	margin: 0.5em auto;
} */

/* .monty-door label {
	display: block;
	color: white;
	font-weight: bold;
	font-size: 2em;
	line-height: 1.1;
	padding: 3.5em 2em;
	background-color: blue;
} */

/* Door radio button styling - general */
.monty-door input[type="radio"]:not(:checked) + label,
.monty-door input[type="radio"]:checked + label {
	display: block;
	color: var(--il-blue);
	font-weight: bold;
	font-size: 2em;
	line-height: 1.1;
	padding: 3.5em 1.5em;
	background-color: var(--il-blue-lighter-4);
	border: 3px solid var(--il-blue);
	cursor: pointer;
}

/* Set standard width on span containing door number / revealed prize */
.monty-door input[type="radio"]:not(:checked) + label span,
.monty-door input[type="radio"]:checked + label span {
	width: 2em;
	display: inline-block;
}

/* Door radio button styling - hover/focus */
.monty-door input[type="radio"]:not(:disabled) + label:hover {
	color: white;
	background-color: rgba(0,0,255,0.75);
	border-color: blue;
}

/* Door radio button styling - checked */
.monty-door input[type="radio"]:checked + label {
	color: white;
	background-color: rgba(0,0,255,0.75);
	border-color: blue;
}

/* Door radio button styling - disabled */
.monty-door input[type="radio"]:disabled:not(:checked) + label,
.monty-door input[type="radio"]:disabled:checked + label {
	border-color: #bbb;
	background-color: #e9e9e9;
	height: 100%;
}

/* Door radio button styling - winner */
.monty-door.winner input[type="radio"] + label,
.monty-door.winner input[type="radio"]:disabled:not(:checked) + label,
.monty-door.winner input[type="radio"]:disabled:checked + label {
	border-color: green;
	background-color: rgba(0,255,0,0.5);
	color: black;
}

/* Door radio button styling - loser */
.monty-door.loser input[type="radio"] + label,
.monty-door.loser input[type="radio"]:disabled:not(:checked) + label,
.monty-door.loser input[type="radio"]:disabled:checked + label {
	border-color: red;
	background-color: rgba(255,0,0,0.5);
	color: black;
}

/* Door radio button styling - loser */
.monty-door.final-notchosen input[type="radio"] + label,
.monty-door.final-notchosen input[type="radio"]:disabled:not(:checked) + label,
.monty-door.final-notchosen input[type="radio"]:disabled:checked + label {
	color: white;
	background-color: rgba(0,0,255,0.25);
	border: 3px solid blue;
}

/* Increase font size when emoji displayed (revealed doors and/or game over) */
.monty-container.game-completed .monty-door input[type="radio"]:disabled + label,
.monty-door input[type="radio"]:disabled + label {
	font-size: 2em;
}


/**
 * Message styles to accompany message-areas.js
 */

.messages {
	color: black;
	background-color: #FDF8ED;
	border: 1px solid #E09600;
	padding: 1em;
}

.messages-container {
	margin: 1em 0;
}

.messages-container-inline {
	display: inline-block;
}

.messages-container.success .messages {
    /* color: #507e3a; */
    background-color: #F3FAEF;
    border-color: #77B259;
}

.messages-container.info .messages {
	/* color: #8f5f00; */
	background-color: #FDF8ED;
	border: 1px solid #E09600;
}

.messages-container.error .messages {
	/* color: #941900; */
	background-color: #FDEBEB;
	border: 1px solid red;
}

.messages strong {
	font-weight: bold;
}

.message-fade-out {
	animation: fade-out 2s forwards;
	animation-delay: 3s;
}

@keyframes fade-out {
	from {opacity: 1;}
	to {opacity: 0;}
}