:root {
	--gap: 0.6rem;
	--jr-hide: none;
	--color-orange-600: #3aa757;
	--color-orange-900: #2a8241;
	--color-orange-920: #0b170efa;
	--accent-color: var(--color-orange-900);
	--text-orange: var(--color-orange-600);
	--text-primary: var(--text-orange);
	--color-white-300: #ffffff;
	--color-white-600: #414141eb;
	--text-secondary: var(--color-white-300);
	--text-alternate: #666;
	--bg-primary: var(--color-white-300);
	--bg-secondary: var(--color-orange-600);
}

.jr_wrapper_container {
	.popup-body {
		padding: 10px;
		min-width: 260px;
		justify-content: center;
		gap: 14px;
		font-family:
			-apple-system,
			BlinkMacSystemFont,
			Segoe UI,
			Roboto,
			Oxygen-Sans,
			Ubuntu,
			Cantarell,
			Helvetica Neue,
			sans-serif;
		font-weight: 200;
		font-size: 1.1rem;
		accent-color: var(--accent-color);
		background: var(--bg-primary);
	}

	button,
	.button {
		padding: 9px 10px;
		border: none;
		border-radius: 4px;
		cursor: pointer;

		background: transparent;
		color: var(--text-primary);
		outline: 1px solid var(--color-orange-600);
		box-sizing: border-box;
		transition-property: background-color, transform, box-shadow;
		transition-duration: 200ms;
	}

	:is(button, .button):hover,
	:is(button, .button):focus {
		box-shadow: 0 0 0 3px #3aa75733;
	}

	:is(button, .button):active,
	:is(button, .button).selected {
		background: var(--bg-secondary);
		outline: 1px solid transparent;
		color: white;
	}

	:is(button, .button):active {
		transform: scale(1.02);
	}

	.transition {
		transition-property: background-color, transform, box-shadow;
		transition-duration: 200ms;
	}

	.shadow {
		box-shadow: 0 0 0 3px #3aa75733;
	}

	select {
		color: var(--text-primary);
		background-color: #0000;
		border-color: var(--bg-secondary);
	}

	.modeLabel {
		display: none;
	}

	:is([br-mode='on'] #onModeLabel, [br-mode='off'] #offModeLabel) {
		display: initial;
	}

	#lineHeightLabel {
		padding-bottom: 4px;
	}

	#checkboxContainer {
		margin-top: 10px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.bg-danger {
		background: #f44336;
	}

	/* || margin */
	.m-0 {
		margin: 0;
	}

	.m-sm {
		margin: 4px;
	}

	.mr-md {
		margin-right: 4px;
	}

	.ml-md {
		margin-left: 4px;
	}

	.m-md {
		margin: 8px;
	}

	.mb-md {
		margin-bottom: 8px;
	}

	.mt-lg {
		margin-top: 12px;
	}

	.mt-1 {
		margin-top: calc(var(--gap) * 1);
	}

	.mt-2 {
		margin-top: calc(var(--gap) * 2);
	}

	.mt-3 {
		margin-top: calc(var(--gap) * 3);
	}

	.mt-4 {
		margin-top: calc(var(--gap) * 4);
	}

	.mt-5 {
		margin-top: calc(var(--gap) * 5);
	}

	/* || margin-autos */
	.ml-auto {
		margin-left: auto;
	}

	.mr-auto {
		margin-right: auto;
	}

	.mt-auto {
		margin-top: auto;
	}

	.mb-auto {
		margin-bottom: auto;
	}

	/* || padding */
	.p-1,
	.p-2,
	.p-3,
	.p-4 {
		padding: calc(4px * var(--padding-n, 1));
	}

	.p-2 {
		--padding-n: 2;
	}

	.p-3 {
		--padding-n: 3;
	}

	.p-4 {
		--padding-n: 4;
	}

	.pt-sm {
		padding-top: 4px;
	}

	.pr-sm {
		padding-right: 4px;
	}

	.pr-md {
		padding-right: 6px;
	}

	.pl-sm {
		padding-left: 4px;
	}

	.pl-md {
		padding-left: 6px;
	}

	/* || width */
	.w-100 {
		width: 100%;
	}

	.w-50 {
		width: 50%;
	}

	/* || gap */
	.gap-1 {
		gap: calc(var(--gap) * 1);
	}

	.gap-2 {
		gap: calc(var(--gap) * 2);
	}

	.gap-3 {
		gap: calc(var(--gap) * 3);
	}

	.gap-4 {
		gap: calc(var(--gap) * 4);
	}

	.gap-5 {
		gap: calc(var(--gap) * 5);
	}

	/* || bg */
	.bg-primary {
		background: var(--bg-primary);
	}

	.bg-secondary {
		background: var(--bg-secondary);
	}

	/* || text */

	.text-white {
		color: var(--text-secondary);
	}

	.text-primary {
		color: var(--text-primary);
	}

	.text-secondary {
		color: var(--text-secondary);
	}

	.text-alternate {
		color: var(--text-alternate);
	}

	.text-lg {
		font-size: 125%;
	}

	.text-md {
		font-size: 85%;
	}

	.text-sm {
		font-size: 75%;
	}

	.text-xs {
		font-size: 50%;
	}

	.text-capitalize {
		text-transform: capitalize;
	}

	.text-uppercase {
		text-transform: uppercase;
	}

	.text-bold {
		font-weight: bold;
	}

	.text-wrap {
		white-space: wrap;
	}

	/** || flex */

	.flex {
		display: flex;
	}

	.flex-column {
		flex-direction: column;
	}

	.justify-between {
		justify-content: space-between;
	}

	.justify-center {
		justify-content: center;
	}

	.justify-around {
		justify-content: space-around;
	}

	.align-items-center {
		align-items: center;
	}

	.block {
		display: block;
	}

	.inline-block {
		display: inline-block;
	}

	/* || component */

	.translation_help_request {
		height: 50px;
	}

	.animated-footer-link {
		transition: all 3s cubic-bezier(0.075, 0.82, 0.165, 1);
		left: -100%;
		opacity: 0;
		height: none;
		position: absolute;
		top: 0;
	}

	.animated-footer-link-show {
		display: inherit;
		opacity: 100%;
		left: 0;
		height: unset;
	}

	.mode-toggle-icon {
		width: 24px;
		background: var(--bg-secondary);
		mix-blend-mode: difference;
	}

	datalist > option {
		margin-right: -8px;
	}

	footer {
		--bg-color: var(--bg-secondary);
		position: sticky;
		margin-top: auto;
		bottom: -5px;
		background: var(--bg-color);
		box-shadow:
			0px 15px 0 20px var(--bg-color),
			0 15px 6px 20px var(--bg-shadow-color, var(--bg-color)),
			0px 35px 0 20px var(--bg-color);

		button,
		.button {
			outline-color: var(--color-orange-920);
		}

		.footer-links {
			background-color: var(--color-orange-900);
		}
	}

	label {
		color: var(--text-alternate);
	}

	img.buymeacoffee {
		height: 60px !important;
		width: 217px !important;
		// transform: scale(50%);
	}

	.buy_me_a_coffee_container:hover > a:hover {
		width: unset !important;
		overflow: visible !important;
	}

	/* || background */
	.bg-primary {
		background: var(--bg-secondary);
	}

	/* || position */
	.pos-absolute {
		position: absolute;
	}

	.pos-relative {
		position: relative;
	}

	.right-0 {
		right: 0;
	}

	.inset-0 {
		inset: 0;
	}

	/* || lists */
	.ul-plain {
		list-style: none;
	}

	/* visibility */
	.show-hover:hover {
		--visible: inherit;
	}

	.show-hover:hover .hide {
		display: inherit;
	}

	.hide {
		display: var(--jr-hide);
	}

	$width_breaks: 0, 25, 50, 75, 100;

	@each $widht_break in $width_breaks {
		.w-#{$widht_break} {
			width: $widht_break + 0%;
		}
	}

	//defind dark modes
	&.dark-mode {
		// bg:dark,text-light
		--bg-primary: var(--color-orange-920);
		--bg-secondary: var(--color-orange-600);
		--text-primary: var(--text-orange);
		--text-secondary: var(--color-orange-600);
		--text-alternate: #e9c3c3;

		.tips > ul {
			background-color: var(--color-orange-920);
		}

		footer {
			--bg-color: var(--color-orange-920);
			--bg-shadow-color: var(--color-white-600);

			button,
			.button {
				outline-color: var(--color-orange-600);
			}

			.footer-links {
				background-color: unset;
			}
		}

		input[type='range'] {
			-webkit-appearance: none;
			/* Hides the slider so that custom slider can be made */
			width: 100%;
			/* Specific width is required for Firefox. */
			background: var(--color-orange-920);
			/* Otherwise white in Chrome */
		}
	}
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg-color: var(--color-orange-900);
		--text-primary: var(--text-orange);
	}
}
