examples.module.css

.main {
	max-width: 60rem;
	margin: 4rem auto;
	padding: 0 1rem;
}
.h1 {
	font-size: 3rem;
}
.h3 {
	font-size: 1rem;
	font-family: var(--ifm-font-family-base);
}

.dashboard-docs-stackblitz {
	display: flex;
	align-items: baseline;
	gap: 1rem;
	margin-top: 2rem;
}
.dashboard-docs-stackblitz h2,
.dashboard-docs-stackblitz p {
	margin-bottom: 0.5rem;
}

.options-and-uppy {
	position: relative;
	border-radius: 5px;
	margin-bottom: 1rem;
	box-shadow:
		rgb(255, 255, 255) 0px 0px 0px 0px,
		rgba(17, 24, 39, 0.05) 0px 0px 0px 1px,
		rgba(0, 0, 0, 0.1) 0px 4px 6px -1px,
		rgba(0, 0, 0, 0.1) 0px 2px 4px -2px;
}
.options {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
	min-height: 500px;
	max-width: 30rem;
	border-radius: 5px;
	padding: 1rem;
}
.options input[type='checkbox'] {
	accent-color: #f37;
	margin-right: 5px;
	margin-left: 0;
}
.options-inner > div {
	display: flexl;
	align-items: center;
	margin: 0.25rem 0;
}
.options input[type='checkbox']:not(:checked, :disabled):hover + label {
	color: black;
}
.options input[type='checkbox']:disabled:hover,
.options input[type='checkbox']:disabled:hover + label {
	cursor: not-allowed;
}
.options select {
	grid-column: 1 / 3;
	background: white;
	padding: 0.2rem 1rem;
	font-size: 1rem;
	border: 1px solid lightgray;
	border-radius: 5px;
}

.dashboard-inner {
	position: relative;
	z-index: 1;
}

@media screen and (min-width: 60rem) {
	.main {
		padding: 0;
	}
	.options {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.5rem;
		align-items: center;
	}
	.options > div:first-of-type {
		grid-column: 1 / 3;
	}
	.options-inner[wrapper-for='Remote sources'] {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.options-and-uppy {
		display: grid;
		grid-template-columns: minmax(20rem, 1fr) 2fr;
	}
}