.a11y-settings {
  position: fixed;
  z-index: 600;
  width: 100%;
  left: 0;
  bottom: 0;
  top: 0;
  background-color: var(--color-surface);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  transition: var(--duration-normal);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(2.4rem);
}
@media (width >= 1200px) {
  .a11y-settings {
    left: auto;
    right: 0;
    width: min(40rem, 100%);
  }
}
.a11y-settings.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
@media (width >= 1200px) {
  .a11y-settings.is-active {
    box-shadow: 0 0 4rem rgb(var(--color-black-rgb) / 0.25);
  }
}
.a11y-settings .a11y-settings__blocks {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 12rem 2.8rem 13.2rem;
  overflow-y: auto;
  scrollbar-width: none;
  max-height: 100%;
}
@media (width >= 1200px) {
  .a11y-settings .a11y-settings__blocks {
    padding: 12rem 3.6rem 13.2rem;
  }
}
.a11y-settings .a11y-settings__block {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2.4rem;
  padding-top: 2.8rem;
  margin-top: 2.8rem;
  border-top: 0.1rem solid rgb(var(--color-text-rgb) / 0.12);
}
.a11y-settings .a11y-settings__block:first-child {
  border-top: none;
  margin-top: 0;
  padding-top: 0;
}
.a11y-settings .a11y-settings__block .a11y-settings__title {
  font-size: var(--font-size-h4);
  font-weight: var(--font-family-regular);
  line-height: var(--line-height-snug);
}
@media (width >= 1200px) {
  .a11y-settings .a11y-settings__block .a11y-settings__title {
    font-size: var(--font-size-xl);
  }
}
.a11y-settings .a11y-settings__buttons {
}

.a11y-settings
  .a11y-settings__block.a11y-settings__block--font-size
  .a11y-settings__buttons {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  width: 100%;
  gap: 0.8rem;
}

.a11y-settings
  .a11y-settings__block.a11y-settings__block--color-scheme
  .a11y-settings__buttons {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  gap: 0.8rem;
}
.a11y-settings .a11y-button {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 1.6rem;
  border-radius: 1.2rem;
  padding: 1.2rem;
  transform: var(--duration-normal);
}
.a11y-settings
  .a11y-settings__block.a11y-settings__block--font-size
  .a11y-settings__buttons
  .a11y-button {
  height: 6rem;
  justify-content: center;
  font-size: var(--font-size-h5);
  background-color: var(--color-surface-muted);
}
@media (width >= 1200px) {
  .a11y-settings
    .a11y-settings__block.a11y-settings__block--font-size
    .a11y-settings__buttons
    .a11y-button {
    font-size: var(--font-size-2xl);
  }
}
.a11y-settings
  .a11y-settings__block.a11y-settings__block--font-size
  .a11y-settings__buttons
  .a11y-button[aria-pressed='true'] {
  background-color: var(--color-primary);
  color: var(--color-on-primary);
}
.a11y-settings
  .a11y-settings__block.a11y-settings__block--color-scheme
  .a11y-settings__buttons
  .a11y-button {
  background-color: var(--color-surface-muted);
}
.a11y-settings
  .a11y-settings__block.a11y-settings__block--color-scheme
  .a11y-settings__buttons
  .a11y-button[aria-pressed='true'] {
  background-color: var(--color-primary);
  color: var(--color-on-primary);
}
.a11y-settings .a11y-button .a11y-button__icon {
  width: 6rem;
  height: 6rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  flex-shrink: 0;
  font-size: var(--font-size-h5);
  border: 0.1rem solid rgb(var(--color-text-rgb) / 0.12);
}
@media (width >= 1200px) {
  .a11y-settings .a11y-button .a11y-button__icon {
    font-size: var(--font-size-2xl);
  }
}
.a11y-settings
  .a11y-button.a11y-button--color-scheme--default
  .a11y-button__icon {
  background-color: var(--color-surface-light);
  color: var(--color-text-dark);
}
.a11y-settings
  .a11y-button.a11y-button--color-scheme--inverse
  .a11y-button__icon {
  background-color: var(--color-surface-dark);
  color: var(--color-text-light);
}
.a11y-settings
  .a11y-button.a11y-button--color-scheme--grayscale
  .a11y-button__icon {
  background-color: var(--color-black);
  color: var(--color-white);
}
.a11y-settings
  .a11y-button.a11y-button--color-scheme--contrast
  .a11y-button__icon {
  background-color: var(--color-contrast);
  color: var(--color-on-contrast);
}
.a11y-settings .a11y-button .a11y-button__text {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 0.2rem;
  align-items: flex-start;
  text-align: left;
}
.a11y-settings .a11y-button .a11y-button__label {
  display: block;
  line-height: var(--line-height-snug);
}
.a11y-settings .a11y-button .a11y-button__description {
  display: block;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-snug);
}
@media (width >= 1200px) {
  .a11y-settings .a11y-button .a11y-button__description {
    font-size: var(--font-size-xs);
  }
}

.a11y-settings .a11y-checkbox {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1.6rem;
  cursor: pointer;
  position: relative;
  width: 100%;
  padding: 0 1.2rem;
}
.a11y-settings .a11y-checkbox .checkbox__input-wrap {
  position: relative;
}
.a11y-settings .a11y-checkbox .checkbox__input {
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.a11y-settings .a11y-checkbox .checkbox__switch {
  width: 6rem;
  height: 3.2rem;
  display: flex;
  border-radius: 20rem;
  border: 0.2rem solid var(--color-primary);
  transition: var(--duration-normal);
}
.a11y-settings .a11y-checkbox .checkbox__input:checked + .checkbox__switch {
  background-color: var(--color-primary);
}
.a11y-settings .a11y-checkbox .checkbox__switch .checkbox__switch-dot {
  display: block;
  border-radius: 50%;
  width: 2.4rem;
  height: 2.4rem;
  background-color: var(--color-primary);
  position: absolute;
  left: 0.4rem;
  top: 0.4rem;
  right: auto;
  transition: var(--duration-normal);
}
.a11y-settings
  .a11y-checkbox
  .checkbox__input:checked
  + .checkbox__switch
  .checkbox__switch-dot {
  left: 3.2rem;
  background-color: var(--color-on-primary);
}
.a11y-settings .a11y-checkbox .checkbox__title {
  display: block;
}

.a11y-settings .a11y-settings__actions {
  position: absolute;
  display: grid;
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 30;
  background: linear-gradient(
    0deg,
    rgb(var(--color-surface-rgb) / 1) 0%,
    rgb(var(--color-surface-rgb) / 0) 100%
  );
  align-items: end;
  padding: 0 0.6rem 0.6rem;
  height: 9.4rem;
}
.a11y-settings .a11y-settings__action-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  width: 100%;
  background-color: rgb(var(--color-surface-dark-rgb) / 0.75);
  border: 0.1rem solid rgb(var(--color-text-light-rgb) / 0.12);
  -webkit-backdrop-filter: blur(0.6rem);
  backdrop-filter: blur(0.6rem);
  border-radius: 20rem;
  padding: 0.6rem;
}
.a11y-settings .a11y-settings__action {
  display: flex;
  width: 100%;
  height: 5.2rem;
  border-radius: 20rem;
  background-color: rgb(var(--color-surface-light-rgb) / 0.12);
  align-items: center;
  padding-right: 2.2rem;
  padding-left: 1rem;
  gap: 1.6rem;
  text-align: center;
}
.a11y-settings .a11y-settings__action .button__icon {
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--color-primary);
  color: var(--color-on-primary);
}
.a11y-settings .a11y-settings__action.a11y-reset .button__icon {
  background-color: #f05c5c;
}
.a11y-settings .a11y-settings__action .button__icon .icon {
  width: 2rem;
  height: 2rem;
}
.a11y-settings .a11y-settings__action .button__text {
  display: block;
  color: var(--color-text-light);
}
.a11y-settings .a11y-settings__action .button__label {
  display: block;
  font-size: var(--font-size-sm);
}