.flash-fiction-reader-root,
body.flash-fiction-reader-page {
	--flash-fiction-reader-font-size: 18px;
	--flash-fiction-reader-font-family: Merriweather, Georgia, serif;
	--flash-fiction-reader-line-height: 1.6;
	--flash-fiction-comment-surface: color-mix(in srgb, var(--bs-body-bg) 82%, var(--bs-tertiary-bg, var(--bs-body-bg)) 18%);
	--flash-fiction-comment-border: color-mix(in srgb, var(--bs-border-color) 88%, transparent);
}

.flash-fiction-reader-root[data-bs-theme="sand"],
body.flash-fiction-reader-page[data-bs-theme="sand"] {
	--bs-body-bg: #f4eed4;
	--bs-body-bg-rgb: 244, 238, 212;
	--bs-body-color: #5a4632;
	--bs-body-color-rgb: 90, 70, 50;
	--bs-secondary-color: #6b5f46;
	--bs-secondary-color-rgb: 107, 95, 70;
	--bs-border-color: #a4977f;
	--bs-tertiary-bg: #efe5c3;
	--bs-tertiary-bg-rgb: 239, 229, 195;
	--bs-secondary-bg: #eadfbb;
	--bs-secondary-bg-rgb: 234, 223, 187;
	--bs-light-bg-subtle: #efe5c3;
	--bs-light-bg-subtle-rgb: 239, 229, 195;
	--bs-card-bg: #f7efd4;
	--flash-fiction-comment-surface: #f6efd5;
	--flash-fiction-comment-border: #d6c7a5;
}

body.flash-fiction-reader-page {
	background-color: var(--bs-body-bg);
	color: var(--bs-body-color);
}

.flash-fiction-reader-toolbar {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 1rem;
}

.flash-fiction-reader-text {
	font-family: var(--flash-fiction-reader-font-family);
	font-size: var(--flash-fiction-reader-font-size);
	line-height: var(--flash-fiction-reader-line-height);
}

.flash-fiction-reader-root .flash-fiction-reader-settings-button {
	white-space: nowrap;
}

.flash-fiction-reader-root .flash-fiction-theme-btn.active {
	color: var(--bs-btn-active-color, var(--bs-white));
	background-color: var(--bs-btn-active-bg, var(--bs-secondary-color));
	border-color: var(--bs-btn-active-border-color, var(--bs-secondary-color));
}

.flash-fiction-reader-root[data-bs-theme="light"] .flash-fiction-author-story-row:hover {
	background-color: color-mix(in srgb, var(--bs-light-bg-subtle) 72%, var(--bs-border-color) 28%);
}

.flash-fiction-reader-root[data-bs-theme="dark"] .flash-fiction-story-list-item.active {
	background-color: color-mix(in srgb, var(--bs-tertiary-bg, #343a40) 72%, var(--bs-body-bg) 28%);
	border-color: color-mix(in srgb, var(--bs-border-color) 82%, var(--bs-body-color) 18%);
	color: var(--bs-body-color);
}

body.flash-fiction-reader-page .modal-content,
body.flash-fiction-reader-page .modal-header,
body.flash-fiction-reader-page .modal-footer {
	background-color: var(--bs-body-bg);
	color: var(--bs-body-color);
	border-color: var(--bs-border-color);
}

body.flash-fiction-reader-page footer {
	background-color: var(--bs-tertiary-bg, var(--bs-light-bg-subtle, var(--bs-body-bg))) !important;
	border-top-color: var(--bs-border-color) !important;
	color: var(--bs-body-color);
}

body.flash-fiction-reader-page footer .text-muted,
body.flash-fiction-reader-page footer .nav-link,
body.flash-fiction-reader-page footer .btn-link {
	color: var(--bs-secondary-color) !important;
}

body.flash-fiction-reader-page footer .nav-link:hover,
body.flash-fiction-reader-page footer .nav-link:focus,
body.flash-fiction-reader-page footer a.text-muted:hover,
body.flash-fiction-reader-page footer a.text-muted:focus,
body.flash-fiction-reader-page footer .btn-link:hover,
body.flash-fiction-reader-page footer .btn-link:focus {
	color: var(--bs-body-color) !important;
}

body.flash-fiction-reader-page footer hr {
	border-top-color: var(--bs-border-color);
	opacity: 1;
}

body.flash-fiction-reader-page footer .btn-outline-dark {
	color: var(--bs-body-color);
	border-color: var(--bs-border-color);
	background-color: transparent;
}

body.flash-fiction-reader-page footer .btn-outline-dark:hover,
body.flash-fiction-reader-page footer .btn-outline-dark:focus {
	color: var(--bs-body-bg);
	background-color: var(--bs-body-color);
	border-color: var(--bs-body-color);
}

body.flash-fiction-reader-page .col-form-label,
body.flash-fiction-reader-page .modal-title,
body.flash-fiction-reader-page .form-label {
	color: var(--bs-body-color);
}

body.flash-fiction-reader-page .form-select,
body.flash-fiction-reader-page .form-control {
	background-color: var(--bs-body-bg);
	color: var(--bs-body-color);
	border-color: var(--bs-border-color);
}

@media (max-width: 767.98px) {
	.flash-fiction-reader-toolbar {
		margin-bottom: 0.75rem;
	}
}