#settingsModal {
	position: fixed;
	inset: 0;
	z-index: 10;
	background-color: var(--primary-bg-color);
	color: var(--primary-fg-color);
	color-scheme: dark;
}

#settingsContainer {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: var(--primary-fg-color) transparent;
	padding: 4.5rem 1rem 1.5rem;
	padding-top: max(4.5rem, calc(3rem + env(safe-area-inset-top)));
	padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
	padding-left: max(1rem, env(safe-area-inset-left));
	padding-right: max(1rem, env(safe-area-inset-right));
}

#settingsContainer::-webkit-scrollbar {
	width: 6px;
}

#settingsContainer::-webkit-scrollbar-thumb {
	background-color: var(--primary-fg-color);
	border-radius: 3px;
}

#settingsContentContainer {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	width: min(328px, 100%);
	margin-top: auto;
	margin-bottom: auto;
	flex-shrink: 0;
}

#settingsHeader {
	font-size: 2.4em;
	font-weight: normal;
	margin: 0;
}

#settingsCloseButton:hover:not(:disabled) .buttonLabel,
#settingsCloseButton:focus-visible .buttonLabel {
	bottom: auto;
	top: calc(100% + 6px);
}

#settingsForm {
	display: flex;
	flex-direction: column;
	width: 100%;
}

#settingsList {
	padding: 2vh 0;
	padding: 2dvh 0;
	width: 100%;
}

#settingsSubmitButton {
	align-self: flex-end;
	margin-top: 1vh;
	margin-top: 1dvh;
}

.settingsPrivacyLink {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	width: auto;
	max-width: 100%;
	color: var(--primary-link-color);
	font-size: 1em;
	text-decoration: none;
}

.settingsPrivacyLinkText {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.settingsPrivacyLink .icon {
	width: 0.9em;
	height: 0.9em;
}

.setting.settingsLegalLinks {
	flex-direction: column;
	align-items: flex-start;
	margin-top: 0.5em;
}

.settingsPrivacyLink + .settingsPrivacyLink {
	margin-top: 0.75em;
}

.settingsPrivacyLink:hover {
	color: var(--button-hover-color);
}

.settingsPrivacyLink:focus-visible {
	outline: 2px solid var(--secondary-link-color);
	outline-offset: 2px;
}

.setting {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	width: 100%;
	padding: 2vh 0;
	padding: 2dvh 0;
}

.settingTitle {
	width: 100%;
	font-size: 1.6em;
	font-weight: normal;
	padding: 1vh 0;
	padding: 1dvh 0;
	margin: 0;
}

.settingOption {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	padding: 1vh 0 1vh 16px;
	padding: 1dvh 0 1dvh 1rem;
}

.settingOptionLabel {
	font-size: 1.4em;
	padding-right: 0;
	min-width: 0;
	flex: 1 1 auto;
}

select {
	height: 2em;
	width: 12em;
	max-width: 100%;
	min-width: 0;
	flex: 0 1 12em;
}

.switch {
	position: relative;
	display: inline-block;
	width: 60px;
	height: 34px;
}

.switch input {
	opacity: 0;
	width: 0;
	height: 0;
}

.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: var(--toggle-off-color);
	-webkit-transition: .4s;
	transition: .4s;
	border-radius: 34px;
}

.slider:before {
	position: absolute;
	content: "";
	height: 26px;
	width: 26px;
	left: 4px;
	bottom: 4px;
	background-color: white;
	-webkit-transition: .4s;
	transition: .4s;
	border-radius: 50%;
}

input:checked + .slider {
	background-color: var(--secondary-link-color);
}

input:focus-visible + .slider {
	outline: 3px solid var(--secondary-link-color);
	outline-offset: 3px;
}

input:checked + .slider:before {
	-webkit-transform: translateX(26px);
	-ms-transform: translateX(26px);
	transform: translateX(26px);
}

#settingsModal.is-overflowing #settingsContentContainer {
	margin-top: 0;
	margin-bottom: 0;
}

#settingsScrollHint {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 5.5rem;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
	background: linear-gradient(to top, var(--primary-bg-color) 45%, transparent);
	pointer-events: none;
	z-index: 11;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, visibility 0.2s ease;
}

#settingsModal.can-scroll-down #settingsScrollHint {
	opacity: 1;
	visibility: visible;
}

#settingsModal.can-scroll-up::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 3.5rem;
	pointer-events: none;
	z-index: 11;
	background: linear-gradient(to bottom, var(--primary-bg-color) 30%, transparent);
}

.settingsScrollChevron {
	width: 16px;
	height: 16px;
	border-right: 2.5px solid var(--primary-fg-color);
	border-bottom: 2.5px solid var(--primary-fg-color);
	transform: rotate(45deg);
	margin-bottom: 2px;
	animation: settingsScrollHintBounce 1.4s ease-in-out infinite;
}

@keyframes settingsScrollHintBounce {
	0%, 100% { transform: translateY(0) rotate(45deg); }
	50% { transform: translateY(6px) rotate(45deg); }
}

@media (prefers-reduced-motion: reduce) {
	.settingsScrollChevron {
		animation: none;
	}
}