:root {
	--accessi-accent: #129ed9;
	--accessi-accent-light: #b8eaff;
	--accessi-accent-lighter: #f1fbff;
	--accessi-accent-darker: #0f7bb3;
	--accessi-white: #fff;
	--accessi-black-soften: #111111;
}

.inprogress {
	outline: 2px solid red !important;
	outline-offset: 2px;
}
.needtest {
	outline: 2px solid blue !important;
	outline-offset: -2px;
}
.accessi-disabled {
	pointer-events: none;
	opacity: 0.5;
	cursor: not-allowed;
}

.accessi-cursor-pointer {
	cursor: pointer;
}

.accessi-access-btn {
	padding: 0.5rem;
	line-height: 0;
	position: fixed;
	bottom: 2rem;
	right: 2rem;
	z-index: 9999;
	border-radius: 1000px;

	&:hover,
	&:focus,
	&:active,
	&:focus-visible {
		outline: 1px solid var(--accessi-accent);
	}
	& span.accessi-active-indicator {
		display: none !important;
	}
	&.accessi-active {
		outline: 1px solid red;
		span.accessi-active-indicator {
			display: block !important;
			position: absolute !important;
			top: auto !important;
			bottom: -1.5rem !important;
			left: 50% !important;
			transform: translateX(-50%) !important;
			color: #fff !important;
			background-color: #111 !important;
			font-size: 1rem !important;
			border-radius: 2rem !important;
			line-height: 1 !important;
			padding: 0.75rem 1rem !important;
			text-align: center !important;
		}
	}
}

.accessi-modal {
	font-family: system-ui, -apple-system, Arial, 'Segoe UI', Verdana, Georgia, Roboto, Oxygen, Ubuntu, Cantarell,
		'Open Sans', 'Helvetica Neue', sans-serif;

	& :is(h1, h2, h3, h4, h5, h6, p, span, a, li) {
		font-family: inherit;
		margin: 0;
	}
	--inline-offset: 1.5rem;
	--max-width: 90vw;
	--head-foot-height: 2rem;
	border-radius: 1rem;
	background-color: var(--accessi-white);
	display: none;
	position: fixed;
	top: auto;
	bottom: 2rem;
	left: auto;
	right: var(--inline-offset);
	border: 1px solid #ccc;
	z-index: 9999;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
	min-width: min(480px, var(--max-width));
	max-width: var(--max-width);
	height: 70dvh;
	overflow: clip;

	&.is-open {
		display: block;
	}

	& .accessi-modal__content {
		display: flex;
		flex-direction: column;
		gap: 1rem;
		overflow: hidden;
		height: 100%;

		& .accessi-modal__header {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			gap: 1rem;
			padding: 2rem 1rem;
			max-height: var(--head-foot-height);
			background-color: var(--accessi-accent-lighter);

			& .accessi-header-icons {
				width: 100%;
			}

			& .accessi-modal__controls {
				line-height: 0;
			}
			& .accessi-modal__title {
				font-size: 1rem;
				font-weight: 600;
				& h4 {
					font-size: 1rem;
					font-weight: 500;
				}
			}
			& .accessi-modal__close {
				line-height: 0;
			}
		}

		& .accessi-modal__main {
			height: calc(100% - calc(2 * var(--head-foot-height)));
			overflow: hidden scroll;
			padding: 0.5rem;

			& .accessi-accessibility-accordion-container {
				border: 1px solid var(--accessi-accent-light);
				border-radius: 1rem;
				overflow: clip;
				margin-bottom: 0.5rem;
				& .accessi-accessibility-accordion-title {
					display: flex;
					justify-content: space-between;
					flex-direction: row;
					flex-wrap: nowrap;
					gap: 1rem;
					font-size: 1.25rem;
					background-color: var(--accessi-accent);
					color: var(--accessi-accent-lighter);
					padding: 1rem;
					transition: 300ms;
					font-weight: 500;

					& span.accessi-accessibility-accordion-icon {
						transition: 700ms ease;
					}

					&.active {
						font-weight: 700;

						& span.accessi-accessibility-accordion-icon {
							transform: rotateX(180deg);
						}
					}
				}
				& .accessi-accessibility-accordion-content {
					gap: 1.5rem;
					text-align: center;
					padding-inline: 0.5rem;
					max-height: 0;
					transition: 300ms ease;
					background-color: var(--accessi-white);

					&.active {
						max-height: 1000px;
						padding-block: 0.5rem;
					}

					& .accessi-accessibility-mode {
						border: 1px solid var(--accessi-accent-light);
						border-radius: 0.5rem;
						padding: 0.75rem 1rem;
						text-align: center;
						font-size: 1.125rem;
						transition: 300ms ease;
						position: relative;
						background-color: var(--accessi-white);
						color: var(--accessi-black-soften);

						&.active {
							&.accessibility-option-togle {
								background-color: var(--accessi-accent);
								color: var(--accessi-white);
							}
							&.accessibility-option-slider {
								background-color: var(--accessi-accent);
								color: var(--accessi-white);
							}
							&:hover {
								color: var(--accessi-black-soften);
							}
						}

						&.accessibility-option-togle {
						}
						&.accessibility-option-slider {
							--ui-slider-height: 0.6rem;
							--ui-dlider-handle-size: calc(2 * var(--ui-slider-height));
							display: flex;
							flex-direction: column;
							gap: 1rem;

							& .ui-widget.ui-widget-content {
								background-color: var(--accessi-accent-light);
								height: var(--ui-slider-height);
								& span.ui-slider-handle {
									border-radius: 50%;
									width: var(--ui-dlider-handle-size);
									height: var(--ui-dlider-handle-size);
									background-color: var(--accessi-accent);
								}
							}

							& button.accessi-reset-slider {
								color: var(--accessi-black-soften);
								background-color: #ffffff00;
								border: 1px solid #ffffff00;
								font-weight: 400;
								font-size: 1rem;
								align-self: center;
								padding: 0.25rem 0.75rem;
								border-radius: 0.25rem;
							}

							&.active {
								& .ui-widget.ui-widget-content {
									background-color: var(--accessi-white);
									& span.ui-slider-handle {
										background-color: var(--accessi-accent-light);
									}
								}
								& button.accessi-reset-slider {
									color: var(--accessi-white);
									font-weight: 700;
									cursor: pointer;
									border-color: var(--accessi-white);
								}
							}
						}

						&:hover {
							border-color: var(--accessi-accent);

							&.accessibility-option-togle {
								background-color: var(--accessi-accent-darker);
								color: var(--accessi-white);
							}
						}

						& span.notice {
							position: absolute;
							top: auto;
							bottom: -0.75rem;
							left: 50%;
							transform: translate(-50%, 0%);
							width: fit-content;
							font-size: 0.75rem;
							background: #111;
							color: #fff;
							padding: 0.125rem 0.25rem;
							border-radius: 0.5rem;
						}
					}
				}
			}
		}

		& .accessi-modal__footer {
			max-height: var(--head-foot-height);
			padding: 0.5rem;
			background-color: var(--accessi-accent-light);
			& .mp-copyright {
				text-align: center;
				& a.mp-copyright-link {
					transition: 300ms;
					color: var(--accessi-accent);
					text-decoration: none;
					& .mp-copyright-img {
						transform: translate(-50%, 0%);
						background-color: var(--accessi-white);
						padding: 10px 20px;
						border-radius: 10px;
						box-shadow: 0px 0px 24px 0px #8b0dbb;
						max-width: 150px;
						position: absolute;
						top: auto;
						bottom: 2rem;
						left: 50%;
						transition: all 200ms;
						opacity: 0;
						visibility: hidden;
						transition-timing-function: ease-in-out;
					}
					&:hover {
						color: var(--accessi-black-soften);
						& .mp-copyright-img {
							visibility: visible;
							opacity: 1;
						}
					}
				}
			}
		}
	}
}

@media screen and (max-width: 600px) {
	a.mp-copyright-link {
		& .mp-copyright-img {
			opacity: 0 !important;
			visibility: hidden !important;
			display: none;
		}
	}
	.accessi-modal {
		& .accessi-modal__content {
			& .accessi-modal__header {
				& .accessi-header-icons {
					width: 75%;
				}
			}
		}
	}
}