@import url('./gfm.css');

/* https://github.com/orgs/community/discussions/16925 */
.markdown-alert {
	margin-top: 0;
	margin-bottom: 16px;
}

.markdown-alert {
	border-left: 0.25em solid var(--alert-color);
	padding: 0 1em;
}

.markdown-alert > :first-child {
	margin-top: 0;
}

.markdown-alert > :last-child {
	margin-bottom: 0;
}

.markdown-alert .markdown-alert-title {
	display: flex;
	align-items: center;
	gap: 0.5em;
	font-weight: bold;
	color: var(--alert-color);
	margin: 0;
}

.markdown-alert-note {
	--alert-color: dodgerblue;
}

.markdown-alert-tip {
	--alert-color: forestgreen;
}

.markdown-alert-important {
	--alert-color: rebeccapurple;
}

.markdown-alert-warning {
	--alert-color: darkorange;
}

.markdown-alert-caution {
	--alert-color: crimson;
}

.markdown-body[data-type='instructions'] {
	.standalone-install-link {
		margin: 16px 0;
		border: 3px solid var(--color-accent-fg);
		border-radius: 0.3rem;
		padding: 0.3rem;
	}

	details {
		summary {
			display: block;
			cursor: pointer;

			&::before {
				display: inline-flex;
				width: 0.8rem;
				height: 0.8rem;
				justify-content: center;
				align-items: center;
				color: white;
				line-height: 0;
				border-radius: 0.2rem;
				margin: 0 0.2rem -1rem 0;
				padding-bottom: 0.3rem;
				transform: translateY(-0.1rem);
			}

			h3 {
				line-height: 0;
			}
		}
	}

	details[open] {
		.closed-only {
			display: none;
		}

		summary {
			&::before {
				content: '-';
				background: var(--color-accent-fg);
				opacity: 0.8;
			}
		}
	}

	details:not([open]) {
		margin: 0;

		summary {
			&::before {
				content: '+';
				background: forestgreen;
			}

			h3 {
				font-size: 0.8rem;
				margin-block-end: 0;
			}
		}
	}
}