options.css

/*
 * Elements
 */

body {
	width: 560px;
	max-width: 100%;
	padding: 12px;
	background-color: var(--sl-background-color);
	color: var(--sl-font-color);
}

@-moz-document url-prefix() {
	@media (prefers-color-scheme: dark) {
		body {
			/* Match Firefox's specific extension settings background color */
			background-color: #202023;
		}
	}
}

/*
 * Section
 */

.section {
	margin-bottom: 1rem;
}

.section__heading {
	margin: 0.4rem 0;
	font-size: 1.3rem;
}

.section__description {
	margin-top: 0;
	color: var(--sl-font-color-faded);
	font-size: 0.9rem;
}

/*
 * Provider Authorizations
 */

.provider-authorizations {
	list-style-type: none;
	padding-left: 0;
	margin: 0;
}

.provider-authorization__user {
	font-size: 0.9rem;
	margin-bottom: 0.6rem;
}

.provider-authorization__button:not(.is-authorized) {
	display: flex;
	align-items: center;
	line-height: 20px;
}

.provider-authorization__button:not(.is-authorized).is-provider-twitch:hover,
.provider-authorization__button:not(.is-authorized).is-provider-twitch:focus {
	filter: brightness(110%);
}

.provider-authorization__button:not(.is-authorized).is-provider-twitch {
	border-color: var(--sl-provider-twitch-foreground);
	background-color: var(--sl-provider-twitch-background);
	color: var(--sl-provider-twitch-foreground);
}

.provider-authorization__provider {
	margin-right: 6px;
}

/*
 * Color Scheme Setting
 */

.color-scheme-setting {
	list-style-type: none;
	padding-left: 0;
}

.color-scheme-setting label {
	display: flex;
	align-items: center;
	cursor: pointer;
	font-size: 0.9rem;
}

.color-scheme-setting input {
	position: relative;
	top: -1px;
	margin: 0;
	margin-right: 6px;
}