/*
  ----- Core -----
*/

@font-face {
  font-family: "Lato";
  font-display: swap;
  font-style: normal;
  font-weight: 400;
  src: url(https://cdn.bfree.ai/shared/Lato-Regular.ttf) format("woff2");
}

@font-face {
  font-family: "Open Dyslexic";
  font-display: swap;
  font-style: normal;
  font-weight: 400;
  src: url(https://cdn.bfree.ai/shared/OpenDyslexic-Regular.woff2) format("woff2");
}

@keyframes a11ySpinner {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

body {
  --a11y-color-primary: rgba(179, 124, 61, 1);
  --a11y-color-text: rgba(3, 3, 3, 1);
  --a11y-color-text-muted: rgba(62, 62, 62, 1);
  --a11y-color-shadow: rgba(3, 3, 3, 0.67);
  --a11y-color-background: rgba(255, 255, 255, 1);
  --a11y-color-surface: rgba(239, 236, 231, 1);
  --a11y-color-surface-primary: rgba(239, 236, 231, 1);
  --a11y-color-border: rgba(221, 221, 221, 1);
  --a11y-color-border-primary: rgba(239, 236, 231, 1);
  --a11y-color-scrollbar-thumb: rgba(179, 124, 61, 1);
  --a11y-color-scrollbar-background: rgba(255, 255, 255, 1);
}

a11y-widget {
  display: block !important;
  -webkit-text-size-adjust: 100%;
  box-sizing: border-box;
  position: absolute;
  font-family: "Lato", sans-serif;
  scrollbar-color: var(--a11y-color-scrollbar-thumb)
    var(--a11y-color-scrollbar-background);
  z-index: 2147483647;
}

a11y-view {
  -webkit-text-size-adjust: 100%;
  display: inline-block;
  box-sizing: border-box;
  color: var(--a11y-color-text);
  font-size: 16px;
  letter-spacing: -0.5%;
  line-height: 150%;
  scrollbar-color: var(--a11y-color-scrollbar-thumb)
    var(--a11y-color-scrollbar-background);
}

@media screen and (max-width: 980px) {
  #a11y-readingHelp-container {
    display: none !important;
  }

  a11y-view[data-type="feature-item-textMagnifier-impl"],
  a11y-view[data-type="feature-item-readingGuide-impl"],
  a11y-view[data-type="feature-item-readingMask-impl"] {
    display: none !important;
  }
}

/*
  ----- FAB Button -----
*/

a11y-view[data-type="fab"] {
  display: inline-block;
  position: fixed;
  z-index: 2147483646;
  width: 56px;
  height: 56px;
  background-image: url(https://cdn.bfree.ai/shared/ic_fab.svg);
  background-size: contain;
  background-position: center;
  cursor: pointer;
}

a11y-view[data-type="fab"][data-pos="top-left"] {
  top: 16px;
  left: 16px;
}
a11y-view[data-type="fab"][data-pos="top-center"] {
  top: 16px;
  left: 50%;
  transform: translate(-50%, 0);
}
a11y-view[data-type="fab"][data-pos="top-right"] {
  top: 16px;
  right: 16px;
}
a11y-view[data-type="fab"][data-pos="center-left"] {
  top: 50%;
  left: 16px;
  transform: translate(0, -50%);
}
a11y-view[data-type="fab"][data-pos="center"] {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
a11y-view[data-type="fab"][data-pos="center-right"] {
  top: 50%;
  right: 16px;
  transform: translate(0, -50%);
}
a11y-view[data-type="fab"][data-pos="bottom-left"] {
  bottom: 16px;
  left: 16px;
}
a11y-view[data-type="fab"][data-pos="bottom-center"] {
  bottom: 16px;
  left: 50%;
  transform: translate(-50%, 0);
}
a11y-view[data-type="fab"][data-pos="bottom-right"] {
  bottom: 16px;
  right: 16px;
}

/*
  ----- Widget Box -----
*/

a11y-view[data-type="widget-box"] {
  display: inline-block;
  position: fixed;
  z-index: 2147483647;
  width: calc(100% - 32px);
  max-width: 652px;
  max-height: min(calc(100% - 32px), 800px);
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  background-color: var(--a11y-color-surface);
  box-shadow: 0 8px 24px -16px var(--a11y-color-shadow);
  border: 1px solid var(--a11y-color-border);
  overflow: hidden;
  transition: all 0.3s;
}

a11y-widget {
  a11y-view[data-type="widget-box"] {
    transform: scale(0);

    &[data-pos="top-left"] {
      top: 16px;
      left: 16px;
      transform-origin: 0% 0%;
    }
    &[data-pos="top-center"] {
      top: 16px;
      left: 50%;
      transform: scale(0) translate(-50%, 0);
      transform-origin: 0% 0%;
    }
    &[data-pos="top-right"] {
      top: 16px;
      right: 16px;
      transform-origin: 100% 0%;
    }
    &[data-pos="center-left"] {
      top: 50%;
      left: 16px;
      transform: scale(0) translate(0, -50%);
      transform-origin: 0% 0%;
    }
    &[data-pos="center"] {
      top: 50%;
      left: 50%;
      transform: scale(0) translate(-50%, -50%);
      transform-origin: 0% 0%;
    }
    &[data-pos="center-right"] {
      top: 50%;
      right: 16px;
      transform: scale(0) translate(0, -50%);
      transform-origin: 100% 0%;
    }
    &[data-pos="bottom-left"] {
      bottom: 16px;
      left: 16px;
      transform-origin: 0% 100%;
    }
    &[data-pos="bottom-center"] {
      bottom: 16px;
      left: 50%;
      transform: scale(0) translate(-50%, 0);
      transform-origin: 0% 100%;
    }
    &[data-pos="bottom-right"] {
      bottom: 16px;
      right: 16px;
      transform-origin: 100% 100%;
    }
  }

  &[data-isopen="true"] {
    a11y-view[data-type="widget-box"] {
      transform: scale(1);
      &[data-pos="top-left"] {
        top: 16px;
        left: 16px;
      }
      &[data-pos="top-center"] {
        top: 16px;
        left: 50%;
        transform: scale(1) translate(-50%, 0);
      }
      &[data-pos="top-right"] {
        top: 16px;
        right: 16px;
      }
      &[data-pos="center-left"] {
        top: 50%;
        left: 16px;
        transform: scale(1) translate(0, -50%);
      }
      &[data-pos="center"] {
        top: 50%;
        left: 50%;
        transform: scale(1) translate(-50%, -50%);
      }
      &[data-pos="center-right"] {
        top: 50%;
        right: 16px;
        transform: scale(1) translate(0, -50%);
      }
      &[data-pos="bottom-left"] {
        bottom: 16px;
        left: 16px;
      }
      &[data-pos="bottom-center"] {
        bottom: 16px;
        left: 50%;
        transform: scale(1) translate(-50%, 0);
      }
      &[data-pos="bottom-right"] {
        bottom: 16px;
        right: 16px;
      }
    }
  }
}

/*
  ----- Widget Header -----
*/

a11y-view[data-type="widget-header"] {
  order: 1;
  background-color: var(--a11y-color-background);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 16px;
  text-align: center;
  border-bottom: 1px solid var(--a11y-color-border);
}

a11y-view[data-type="widget-menu"] {
  cursor: pointer;
  width: 24px;
  height: 24px;
  background-image: url(https://cdn.bfree.ai/shared/ic_more_fill.svg);
  background-size: contain;
  background-position: center;
}

a11y-view[data-type="widget-header-text"] {
  font-size: 20px;
  font-weight: 500;
}

a11y-view[data-type="widget-close"] {
  cursor: pointer;
  width: 24px;
  height: 24px;
  background-image: url(https://cdn.bfree.ai/shared/ic_close.svg);
  background-size: contain;
  background-position: center;
}

/*
  ----- Widget Header: Widget Menu Popover -----
*/

a11y-view[data-type="widget-menu-popover"] {
  position: absolute;
  z-index: 1003;
  top: 36px;
  left: 36px;
  width: 100%;
  background-color: var(--a11y-color-background);
  box-shadow: 0 8px 24px -16px var(--a11y-color-shadow);
  outline: 1px solid var(--a11y-color-border);
  border-radius: 8px;
  max-width: min(320px, calc(100% - 72px));
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: left;
  padding: 8px 0;
  gap: 3px;
  transform: scale(0);
  transform-origin: 0% 0%;
  transition: all 0.3s;

  &[data-isopen="true"] {
    transform: scale(1);
  }

  a11y-view[role="button"] {
    cursor: pointer;
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    gap: 16px;
    padding: 8px 24px;

    &:hover {
      background-color: var(--a11y-color-surface);
    }

    a11y-view[data-type="widget-menu-btn-icon"] {
      width: 16px;
      height: 16px;
      mask-size: 100%;
      background-repeat: no-repeat;
      background-position: center;
      background-color: var(--a11y-color-text);
    }
  }

  a11y-view[data-type="widget-action-info"]
    a11y-view[data-type="widget-menu-btn-icon"] {
    mask: url(https://cdn.bfree.ai/shared/ic_hand.svg) no-repeat center/100%;
    --webkit-mask: url(https://cdn.bfree.ai/shared/ic_hand.svg) no-repeat center/100%;
  }

  a11y-view[data-type="widget-action-hide"]
    a11y-view[data-type="widget-menu-btn-icon"] {
    mask: url(https://cdn.bfree.ai/shared/ic_visibility_off.svg);
    --webkit-mask: url(https://cdn.bfree.ai/shared/ic_visibility_off.svg);
  }

  a11y-view[data-type="widget-action-reset"]
    a11y-view[data-type="widget-menu-btn-icon"] {
    mask: url(https://cdn.bfree.ai/shared/ic_reset.svg);
    --webkit-mask: url(https://cdn.bfree.ai/shared/ic_reset.svg);
  }
}

@media screen and (max-width: 400px) {
  a11y-view[data-type="widget-menu-popover"] {
    top: 48px;
    left: 16px;
    max-width: calc(100% - 32px);
  }
}

/*
  ----- Widget Body -----
*/

a11y-view[data-type="widget-body"] {
  order: 2;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

/*
  ----- Widget Body: Widget Info -----
*/

a11y-view[data-type="widget-info"] {
  display: flex;
  flex-direction: column;
  padding: 16px;
  background-color: var(--a11y-color-background);
}

a11y-view[data-type="widget-info"] a11y-view[role="img"] {
  width: 90%;
  margin: 0 auto;
  max-width: 150px;
  aspect-ratio: 1.27;
  position: relative;
}

a11y-view[data-type="widget-info"] a11y-view[role="img"]::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  z-index: 2;
  background-image: url(https://cdn.bfree.ai/shared/ic_a11y_main.svg);
  background-size: 100%;
  background-repeat: no-repeat;
}

a11y-view[data-type="widget-info"] a11y-view[role="img"]::after {
  content: "";
  width: 25%;
  aspect-ratio: 1;
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  transform: translate(-44%, -38%);
  z-index: 1;
  background-color: var(--a11y-color-primary);
}

a11y-view[data-type="widget-info"] a11y-view[role="paragraph"] {
  width: 90%;
  margin: 0 auto;
  text-align: center;
  color: var(--a11y-color-text-muted);
}

/*
  ----- Widget Body: Features -----
*/

a11y-view[data-type="features"] {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/*
  ----- Widget Body: Narator Popover -----
*/

a11y-view[data-type="narator-popover"] {
  position: absolute;
  background-color: var(--a11y-color-background);
  z-index: 1003;
  width: 90%;
  top: 50%;
  left: 50%;
  max-width: 332px;
  max-height: min(500px, 90%);
  border-radius: 16px;
  box-shadow: 0 8px 24px -16px var(--a11y-color-shadow);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: hidden;
  transform: scale(0) translate(-50%, -50%);
  transform-origin: 0% 0%;
  transition: all 0.3s;

  &[data-isopen="true"] {
    transform: scale(1) translate(-50%, -50%);
  }
}

a11y-view[data-type="narator-popover-heading"] {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

a11y-view[data-type="narator-popover-heading-icon"] {
  width: 24px;
  height: 24px;
  position: relative;

  &::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    mask: url(https://cdn.bfree.ai/shared/ic_narator.svg) no-repeat center/100%;
    --webkit-mask: url(https://cdn.bfree.ai/shared/ic_narator.svg) no-repeat center/100%;
    background-color: var(--a11y-color-primary);
  }
}

a11y-view[data-type="narator-popover-close"] {
  cursor: pointer;
  width: 20px;
  height: 20px;
  background-image: url(https://cdn.bfree.ai/shared/ic_close.svg);
  background-size: contain;
  background-position: center;
  margin-left: auto;
}

a11y-view[data-type="narator-popover-main"] {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: hidden;
}

a11y-view[data-type="narator-popover-select"] {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

a11y-view[data-type="narator-popover-select-trigger"] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--a11y-color-border);
  padding: 8px 16px;
  border-radius: 16px;
  cursor: pointer;
}

a11y-view[data-type="narator-popover-select-trigger-text"] {
  font-size: 14px;
  color: var(--a11y-color-text);
}

a11y-view[data-type="narator-popover-select-trigger-icon"] {
  width: 24px;
  height: 24px;
  position: relative;

  &::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    mask: url(https://cdn.bfree.ai/shared/ic_chevron_down.svg) no-repeat center/100%;
    --webkit-mask: url(https://cdn.bfree.ai/shared/ic_chevron_down.svg) no-repeat center/100%;
    background-color: var(--a11y-color-text);
  }
}

a11y-view[data-type="narator-popover-select-options"] {
  border: 1px solid var(--a11y-color-border);
  border-radius: 16px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  padding: 8px;
}
a11y-view[data-type="narator-popover-select-optionItem"] {
  padding: 8px;
  cursor: pointer;
  border-radius: 8px;
  &:hover {
    background-color: var(--a11y-color-surface);
  }
  &[data-isactive="true"] {
    background-color: var(--a11y-color-surface-primary);
    color: var(--a11y-color-primary);
  }
}

a11y-view[data-type="narator-popover-rate"] {
  display: flex;
  flex-direction: column;
  gap: 16px;

  input[type="range"] {
    accent-color: var(--a11y-color-primary);
  }
}

a11y-view[data-type="narator-popover-actions"] {
  display: flex;
  flex-direction: row;
  gap: 8px;
}

a11y-view[data-type="narator-popover-action-1"] {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--a11y-color-background);
  color: var(--a11y-color-primary);
  border: 1px solid var(--a11y-color-border-primary);
  padding: 8px;
  border-radius: 12px;
  text-align: center;
  font-weight: 600;
  cursor: pointer;

  a11y-view[data-type="narator-popover-icon-naratorCheck"] {
    &::after {
      background-color: var(--a11y-color-primary);
    }
  }
}

a11y-view[data-type="narator-popover-action-2"] {
  flex: 1;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background-color: var(--a11y-color-primary);
  color: var(--a11y-color-background);
  padding: 8px;
  border-radius: 12px;
  text-align: center;
  font-weight: 600;
  cursor: pointer;
  gap: 8px;

  a11y-view[data-type="narator-popover-icon-naratorCheck"] {
    &::after {
      background-color: var(--a11y-color-background);
    }
  }

  a11y-view[data-type="narator-popover-icon-audio"] {
    &::after {
      background-color: var(--a11y-color-background);
    }
  }
}

a11y-view[data-type="narator-popover-icon-naratorCheck"] {
  width: 24px;
  height: 18.5px;
  position: relative;

  &::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    mask: url(https://cdn.bfree.ai/shared/ic_narator_check.svg) no-repeat center/100%;
    --webkit-mask: url(https://cdn.bfree.ai/shared/ic_narator_check.svg) no-repeat center/100%;
  }
}

a11y-view[data-type="narator-popover-icon-audio"] {
  width: 20px;
  height: 18px;
  position: relative;

  &::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    mask: url(https://cdn.bfree.ai/shared/ic_sound.svg) no-repeat center/100%;
    --webkit-mask: url(https://cdn.bfree.ai/shared/ic_sound.svg) no-repeat center/100%;
  }
}

@media screen and (max-width: 375px) {
  a11y-view[data-type="narator-popover-actions"] {
    flex-direction: column;
  }
}

/*
  ----- Widget Body: Features: Ai -----
*/

a11y-view[data-type="features"] a11y-view[data-type="feature-ai"] {
  display: flex;
  flex-direction: column;

  a11y-view[data-type="feature-ai-main"] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  a11y-view[data-type="feature-ai-heading"] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    gap: 24px;
  }

  a11y-view[data-type="feature-ai-icon"] {
    width: 60px;
    height: 60px;
    position: relative;
    background-color: var(--a11y-color-surface-primary);
    border-radius: 16px;

    &::after {
      content: "";
      position: absolute;
      width: calc(100% - 24px);
      height: calc(100% - 28px);
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      mask: url(https://cdn.bfree.ai/shared/ic_ai.svg) no-repeat center/100%;
      --webkit-mask: url(https://cdn.bfree.ai/shared/ic_ai.svg) no-repeat center/100%;
      background-color: var(--a11y-color-primary);
    }
  }

  a11y-view[data-type="feature-ai-content"] {
    display: flex;
    flex-direction: column;
    align-items: start;
    text-align: left;
    gap: 4px;

    a11y-view[role="heading"] {
      color: var(--a11y-color-primary);
      font-size: 20px;
      font-weight: 600;
    }

    a11y-view[role="paragraph"] {
      font-size: 14px;
      color: var(--a11y-color-text-muted);
    }
  }

  a11y-view[data-type="feature-ai-actions"] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }

  a11y-view[data-type="feature-ai-narator"] {
    width: 32px;
    height: 32px;
    border: 1px solid var(--a11y-color-primary);
    border-radius: 50%;
    position: relative;
  }

  a11y-view[data-type="feature-ai-narator"],
  a11y-view[data-type="feature-ai-control"] {
    width: 32px;
    height: 32px;
    border: 1px solid var(--a11y-color-primary);
    border-radius: 50%;
    position: relative;
    opacity: 0.5;
    cursor: not-allowed;

    &::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      width: 50%;
      height: 50%;
      transform: translate(-50%, -50%);
      background-color: var(--a11y-color-primary);
    }
  }

  a11y-view[data-type="feature-ai-narator"]::after {
    mask: url(https://cdn.bfree.ai/shared/ic_narator.svg) no-repeat center/100%;
    --webkit-mask: url(https://cdn.bfree.ai/shared/ic_narator.svg) no-repeat center/100%;
  }

  a11y-view[data-type="feature-ai-control"]::after {
    mask: url(https://cdn.bfree.ai/shared/ic_sound.svg) no-repeat center/100%;
    --webkit-mask: url(https://cdn.bfree.ai/shared/ic_sound.svg) no-repeat center/100%;
  }

  &[data-isplaying="true"] {
    a11y-view[data-type="feature-ai-control"]::after {
      width: 70%;
      height: 70%;
      mask: url(https://cdn.bfree.ai/shared/ic_stop.svg) no-repeat center/100%;
      --webkit-mask: url(https://cdn.bfree.ai/shared/ic_stop.svg) no-repeat center/100%;
    }
  }

  a11y-view[data-type="feature-ai-switch"] {
    width: calc((27px * 2) + 4px);
    height: 31px;
    background-color: var(--a11y-color-surface);
    border-radius: 50px;
    position: relative;
    cursor: pointer;
    &::after {
      content: "";
      position: absolute;
      top: 2px;
      left: 2px;
      height: calc(100% - 4px);
      aspect-ratio: 1;
      background-color: white;
      border-radius: 100%;
      box-shadow: 4px 4px 16px -8px var(--a11y-color-shadow);
      transition: all 0.3s;
    }
  }

  a11y-view[data-type="feature-ai-result"] {
    margin-top: 0;
    border: none;
    height: 0;
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: justify;
  }

  &[data-enabled="true"] {
    a11y-view[data-type="feature-ai-narator"] {
      opacity: 1;
      cursor: pointer;
    }

    &[data-isloading="false"] a11y-view[data-type="feature-ai-control"] {
      opacity: 1;
      cursor: pointer;
    }

    a11y-view[data-type="feature-ai-switch"] {
      background-color: var(--a11y-color-primary);
      &::after {
        transform: translateX(27px);
      }
    }

    a11y-view[data-type="feature-ai-result"] {
      margin-top: 24px;
      border: 1px solid var(--a11y-color-border-primary);
      border-radius: 16px;
      height: auto;
      padding: 16px;
    }
  }

  &[data-isloading="true"] {
    a11y-view[data-type="feature-ai-loading"] {
      width: 32px;
      height: 32px;
      border: 4px solid var(--a11y-color-surface-primary);
      border-bottom-color: transparent;
      border-radius: 50%;
      display: inline-block;
      box-sizing: border-box;
      animation: a11ySpinner 1s linear infinite;
      margin: 20px auto;
    }
  }

  a11y-view[data-type="feature-ai-resultText"] {
    font-size: 16px;
    color: var(--a11y-color-text);
    font-weight: 600;
  }
}

@media screen and (max-width: 520px) {
  a11y-view[data-type="features"] a11y-view[data-type="feature-ai"] {
    a11y-view[data-type="feature-ai-main"] {
      gap: 24px;
      flex-direction: column;
    }

    a11y-view[data-type="feature-ai-heading"] {
      flex-direction: column;
      gap: 8px;
    }

    a11y-view[data-type="feature-ai-content"] {
      text-align: center;
      align-items: center;
    }
  }
}

/*
  ----- Widget Body: Features: Page Nav -----
*/

a11y-view[data-type="features"]
  a11y-view[data-type="feature-pagenav-container"] {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 16px;
}

a11y-view[data-type="features"] a11y-view[data-type="feature-pagenav"] {
  padding: 16px;
  outline: 1px solid var(--a11y-color-border-primary);
  border-radius: 16px;
  display: flex;
  gap: 16px;
  font-weight: 600;
  color: var(--a11y-color-primary);
  cursor: pointer;
  box-shadow: 4px 4px 16px -8px var(--a11y-color-shadow);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.3s;

  &:hover {
    transform: scale(1.05);
  }
  &.w-1\/1 {
    width: 100%;
  }
  &.w-1\/2 {
    width: calc(50% - 8px);
  }

  a11y-view[data-type="feature-pagenav-icon"] {
    width: 24px;
    height: 24px;
    mask: url(https://cdn.bfree.ai/shared/ic_arrow_right.svg) no-repeat center/100%;
    --webkit-mask: url(https://cdn.bfree.ai/shared/ic_arrow_right.svg) no-repeat center/100%;
    background-color: var(--a11y-color-primary);
  }
}

@media screen and (max-width: 680px) {
  a11y-view[data-type="features"] {
    a11y-view[data-type="feature-pagenav"] {
      &.w-1\/2 {
        width: 100%;
      }
    }
  }
}

/*
  ----- Widget Body: Features: Common -----
*/

a11y-view[data-type="features"] {
  a11y-view[data-type="feature-group-card"] {
    padding: 16px;
    background-color: var(--a11y-color-background);
    border-radius: 16px;
    box-shadow: 0 8px 24px -16px var(--a11y-color-shadow);
  }

  a11y-view[data-type="feature-group-heading"] {
    display: flex;
    flex-direction: column;
    text-align: center;
    max-width: 90%;
    margin: 0 auto 24px auto;

    [role="heading"] {
      font-weight: 600;
      font-size: 20px;
    }
    [role="paragraph"] {
      color: var(--a11y-color-text-muted);
      font-size: 14px;
    }
  }

  a11y-view[data-type="feature-group-container"] {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px;

    a11y-view[data-type="feature-item"] {
      padding: 16px;
      outline: 1px solid var(--a11y-color-border);
      border-radius: 16px;
      gap: 16px;
      font-weight: 600;
      cursor: pointer;
      box-shadow: 4px 8px 16px -12px var(--a11y-color-shadow);
      transition: all 0.3s;
      display: flex;
      justify-content: center;
      align-items: center;

      &.w-1\/1 {
        width: 100%;

        > a11y-view {
          width: 100%;
          flex-direction: row;
          align-items: center;
        }

        a11y-view[role="paragraph"] {
          margin: 0 16px;
        }

        a11y-view[data-type="feature-item-switch"],
        a11y-view[data-type="feature-item-level"] {
          margin-left: auto;
        }
      }
      &.w-1\/2 {
        width: calc(50% - 8px);
      }
      &.w-1\/3 {
        width: calc((100% - 32px) / 3);
      }

      &:hover {
        transform: scale(1.05);
      }

      > a11y-view {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 0 auto;
      }
    }

    a11y-view[data-type="feature-item-icon"] {
      min-width: 32px;
      width: 32px;
      height: 32px;
      background-color: var(--a11y-color-text);
      transition: all 0.3s;
    }

    a11y-view[role="paragraph"] {
      text-align: center;
      margin: 8px 0 16px 0;
      transition: all 0.3s;
    }

    a11y-view[data-type="feature-item-grayscale"] {
      a11y-view[data-type="feature-item-icon"] {
        mask: url(https://cdn.bfree.ai/shared/ic_grayscale.svg) no-repeat center/100%;
        --webkit-mask: url(https://cdn.bfree.ai/shared/ic_grayscale.svg) no-repeat center/100%;
      }
    }

    a11y-view[data-type="feature-item-higherContrast"] {
      a11y-view[data-type="feature-item-icon"] {
        mask: url(https://cdn.bfree.ai/shared/ic_higher_contrast.svg) no-repeat center/100%;
        --webkit-mask: url(https://cdn.bfree.ai/shared/ic_higher_contrast.svg) no-repeat
          center/100%;
      }
    }

    a11y-view[data-type="feature-item-invertColors"] {
      a11y-view[data-type="feature-item-icon"] {
        mask: url(https://cdn.bfree.ai/shared/ic_invert_colors.svg) no-repeat center/100%;
        --webkit-mask: url(https://cdn.bfree.ai/shared/ic_invert_colors.svg) no-repeat center/100%;
      }
    }

    a11y-view[data-type="feature-item-reduceBrightness"] {
      a11y-view[data-type="feature-item-icon"] {
        mask: url(https://cdn.bfree.ai/shared/ic_reduce_brightness.svg) no-repeat center/100%;
        --webkit-mask: url(https://cdn.bfree.ai/shared/ic_reduce_brightness.svg) no-repeat
          center/100%;
      }
    }

    a11y-view[data-type="feature-item-reduceTransparency"] {
      a11y-view[data-type="feature-item-icon"] {
        mask: url(https://cdn.bfree.ai/shared/ic_reduce_transparency.svg) no-repeat center/100%;
        --webkit-mask: url(https://cdn.bfree.ai/shared/ic_reduce_transparency.svg) no-repeat
          center/100%;
      }
    }

    a11y-view[data-type="feature-item-biggerText"] {
      a11y-view[data-type="feature-item-icon"] {
        mask: url(https://cdn.bfree.ai/shared/ic_text_underlined.svg) no-repeat center/100%;
        --webkit-mask: url(https://cdn.bfree.ai/shared/ic_text_underlined.svg) no-repeat
          center/100%;
      }
    }

    a11y-view[data-type="feature-item-letterSpacing"] {
      a11y-view[data-type="feature-item-icon"] {
        mask: url(https://cdn.bfree.ai/shared/ic_horz_spacing.svg) no-repeat center/100%;
        --webkit-mask: url(https://cdn.bfree.ai/shared/ic_horz_spacing.svg) no-repeat center/100%;
      }
    }

    a11y-view[data-type="feature-item-lineHeight"] {
      a11y-view[data-type="feature-item-icon"] {
        mask: url(https://cdn.bfree.ai/shared/ic_vert_spacing.svg) no-repeat center/100%;
        --webkit-mask: url(https://cdn.bfree.ai/shared/ic_vert_spacing.svg) no-repeat center/100%;
      }
    }

    a11y-view[data-type="feature-item-focusText"] {
      a11y-view[data-type="feature-item-icon"] {
        mask: url(https://cdn.bfree.ai/shared/ic_focus_text.svg) no-repeat center/100%;
        --webkit-mask: url(https://cdn.bfree.ai/shared/ic_focus_text.svg) no-repeat center/100%;
      }
    }

    a11y-view[data-type="feature-item-dyslexic"] {
      a11y-view[data-type="feature-item-icon"] {
        mask: url(https://cdn.bfree.ai/shared/ic_friendly_font.svg) no-repeat center/100%;
        --webkit-mask: url(https://cdn.bfree.ai/shared/ic_friendly_font.svg) no-repeat center/100%;
      }
    }

    a11y-view[data-type="feature-item-fontSystem"] {
      a11y-view[data-type="feature-item-icon"] {
        mask: url(https://cdn.bfree.ai/shared/ic_font_system.svg) no-repeat center/100%;
        --webkit-mask: url(https://cdn.bfree.ai/shared/ic_font_system.svg) no-repeat center/100%;
      }
    }

    a11y-view[data-type="feature-item-highlightHeading"] {
      a11y-view[data-type="feature-item-icon"] {
        mask: url(https://cdn.bfree.ai/shared/ic_highlight_heading.svg) no-repeat center/100%;
        --webkit-mask: url(https://cdn.bfree.ai/shared/ic_highlight_heading.svg) no-repeat
          center/100%;
      }
    }

    a11y-view[data-type="feature-item-highlightLink"] {
      a11y-view[data-type="feature-item-icon"] {
        mask: url(https://cdn.bfree.ai/shared/ic_link.svg) no-repeat center/100%;
        --webkit-mask: url(https://cdn.bfree.ai/shared/ic_link.svg) no-repeat center/100%;
      }
    }

    a11y-view[data-type="feature-item-hideImage"] {
      a11y-view[data-type="feature-item-icon"] {
        mask: url(https://cdn.bfree.ai/shared/ic_hide_image.svg) no-repeat center/100%;
        --webkit-mask: url(https://cdn.bfree.ai/shared/ic_hide_image.svg) no-repeat center/100%;
      }
    }

    a11y-view[data-type="feature-item-largerCursor"] {
      a11y-view[data-type="feature-item-icon"] {
        mask: url(https://cdn.bfree.ai/shared/ic_cursor.svg) no-repeat center/100%;
        --webkit-mask: url(https://cdn.bfree.ai/shared/ic_cursor.svg) no-repeat center/100%;
      }
    }

    a11y-view[data-type="feature-item-reduceMovements"] {
      a11y-view[data-type="feature-item-icon"] {
        mask: url(https://cdn.bfree.ai/shared/ic_reduce_movements.svg) no-repeat center/100%;
        --webkit-mask: url(https://cdn.bfree.ai/shared/ic_reduce_movements.svg) no-repeat
          center/100%;
      }
    }

    a11y-view[data-type="feature-item-textMagnifier"] {
      a11y-view[data-type="feature-item-icon"] {
        mask: url(https://cdn.bfree.ai/shared/ic_magnify_plus.svg) no-repeat center/100%;
        --webkit-mask: url(https://cdn.bfree.ai/shared/ic_magnify_plus.svg) no-repeat center/100%;
      }
    }

    a11y-view[data-type="feature-item-readingGuide"] {
      a11y-view[data-type="feature-item-icon"] {
        mask: url(https://cdn.bfree.ai/shared/ic_reading_guide.svg) no-repeat center/100%;
        --webkit-mask: url(https://cdn.bfree.ai/shared/ic_reading_guide.svg) no-repeat center/100%;
      }
    }

    a11y-view[data-type="feature-item-readingMask"] {
      a11y-view[data-type="feature-item-icon"] {
        mask: url(https://cdn.bfree.ai/shared/ic_reading_mask.svg) no-repeat center/100%;
        --webkit-mask: url(https://cdn.bfree.ai/shared/ic_reading_mask.svg) no-repeat center/100%;
      }
    }

    a11y-view[data-type="feature-item-switch"] {
      width: calc((27px * 2) + 4px);
      min-width: calc((27px * 2) + 4px);
      height: 31px;
      background-color: var(--a11y-color-surface);
      border-radius: 50px;
      position: relative;
      &::after {
        content: "";
        position: absolute;
        top: 2px;
        left: 2px;
        height: calc(100% - 4px);
        aspect-ratio: 1;
        background-color: white;
        border-radius: 100%;
        box-shadow: 4px 4px 16px -8px var(--a11y-color-shadow);

        transition: all 0.3s;
      }
    }

    a11y-view[data-type="feature-item-level"] {
      display: grid;
      grid-template-columns: repeat(4, minmax(12px, 24px));
      gap: 4px;

      a11y-view {
        background-color: var(--a11y-color-surface);
        height: 4px;
        width: 100%;
        border-radius: 2px;
      }
    }

    a11y-view[data-type="feature-item"][data-enabled="true"] {
      outline: 1px solid var(--a11y-color-border-primary);

      a11y-view[data-type="feature-item-icon"] {
        background-color: var(--a11y-color-primary);
      }
      a11y-view[role="paragraph"] {
        color: var(--a11y-color-primary);
      }

      a11y-view[data-type="feature-item-switch"] {
        background-color: var(--a11y-color-primary);
        &::after {
          transform: translateX(27px);
        }
      }
    }

    a11y-view[data-type="feature-item"] {
      &[data-level="1"],
      &[data-level="2"],
      &[data-level="3"],
      &[data-level="4"] {
        outline: 1px solid var(--a11y-color-border-primary);

        a11y-view[data-type="feature-item-icon"] {
          background-color: var(--a11y-color-primary);
        }
        a11y-view[role="paragraph"] {
          color: var(--a11y-color-primary);
        }
      }

      &[data-level="1"] {
        a11y-view[data-type="feature-item-level"] a11y-view:nth-child(1) {
          background-color: var(--a11y-color-primary);
        }
      }
      &[data-level="2"] {
        a11y-view[data-type="feature-item-level"] a11y-view:nth-child(-n + 2) {
          background-color: var(--a11y-color-primary);
        }
      }
      &[data-level="3"] {
        a11y-view[data-type="feature-item-level"] a11y-view:nth-child(-n + 3) {
          background-color: var(--a11y-color-primary);
        }
      }
      &[data-level="4"] {
        a11y-view[data-type="feature-item-level"] a11y-view:nth-child(-n + 4) {
          background-color: var(--a11y-color-primary);
        }
      }
    }
  }
}

@media screen and (max-width: 680px) {
  a11y-view[data-type="features"] {
    a11y-view[data-type="feature-group-container"] {
      a11y-view[data-type="feature-item"] {
        &.w-1\/2:last-child:nth-child(2n + 1):nth-child(n + 3) {
          width: 100%;
          > a11y-view {
            width: 100%;
            flex-direction: row;
            align-items: center;
          }

          a11y-view[role="paragraph"] {
            margin: 0 16px;
            text-align: left;
          }

          a11y-view[data-type="feature-item-switch"],
          a11y-view[data-type="feature-item-level"] {
            margin-left: auto;
          }
        }
        &.w-1\/3 {
          width: calc(50% - 8px);
          &:last-child:nth-child(2n + 1):nth-child(n + 3) {
            width: 100%;
            > a11y-view {
              width: 100%;
              flex-direction: row;
              align-items: center;
            }

            a11y-view[role="paragraph"] {
              margin: 0 16px;
              text-align: left;
            }

            a11y-view[data-type="feature-item-switch"],
            a11y-view[data-type="feature-item-level"] {
              margin-left: auto;
            }
          }
        }
      }
    }
  }
}

@media screen and (max-width: 520px) {
  a11y-view[data-type="features"] {
    a11y-view[data-type="feature-group-container"] {
      a11y-view[data-type="feature-item"] {
        &.w-1\/2 {
          width: 100%;
          > a11y-view {
            width: 100%;
            flex-direction: row;
            align-items: center;
          }

          a11y-view[role="paragraph"] {
            margin: 0 16px;
            text-align: left;
          }

          a11y-view[data-type="feature-item-switch"],
          a11y-view[data-type="feature-item-level"] {
            margin-left: auto;
          }
        }
        &.w-1\/3 {
          width: 100%;
          > a11y-view {
            width: 100%;
            flex-direction: row;
            align-items: center;
          }

          a11y-view[role="paragraph"] {
            margin: 0 16px;
            text-align: left;
          }

          a11y-view[data-type="feature-item-switch"],
          a11y-view[data-type="feature-item-level"] {
            margin-left: auto;
          }
        }
      }
    }
  }
}

/*
  ----- Widget Body: Features: ReadingDocument -----
*/

a11y-view[data-type="features"] a11y-view[data-type="feature-readingDocument"] {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 20px 16px;
  border: 1px solid var(--a11y-color-border);
  border-radius: 16px;
  width: 100%;
  box-shadow: 0 8px 24px -16px var(--a11y-color-shadow);

  a11y-view[data-type="feature-readingDocument-heading"] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    gap: 16px;
  }

  a11y-view[data-type="feature-readingDocument-icon"] {
    width: 24px;
    height: 24px;
    mask: url(https://cdn.bfree.ai/shared/ic_reading_document.svg) no-repeat center/100%;
    --webkit-mask: url(https://cdn.bfree.ai/shared/ic_reading_document.svg) no-repeat center/100%;
    background-color: var(--a11y-color-text);
  }

  a11y-view[data-type="feature-readingDocument-actions"] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }

  a11y-view[data-type="feature-readingDocument-narator"] {
    width: 32px;
    height: 32px;
    border: 1px solid var(--a11y-color-text);
    border-radius: 50%;
    position: relative;
  }

  a11y-view[data-type="feature-readingDocument-narator"],
  a11y-view[data-type="feature-readingDocument-control-1"],
  a11y-view[data-type="feature-readingDocument-control-2"] {
    width: 32px;
    height: 32px;
    border: 1px solid var(--a11y-color-text);
    border-radius: 50%;
    position: relative;
    cursor: pointer;

    &::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      width: 50%;
      height: 50%;
      transform: translate(-50%, -50%);
      background-color: var(--a11y-color-text);
    }
  }

  a11y-view[data-type="feature-readingDocument-control-2"] {
    border-color: var(--a11y-color-primary);
    &::after {
      background-color: var(--a11y-color-primary);
    }
  }

  a11y-view[data-type="feature-readingDocument-narator"]::after {
    mask: url(https://cdn.bfree.ai/shared/ic_narator.svg) no-repeat center/100%;
    --webkit-mask: url(https://cdn.bfree.ai/shared/ic_narator.svg) no-repeat center/100%;
  }

  a11y-view[data-type="feature-readingDocument-control-1"]::after {
    mask: url(https://cdn.bfree.ai/shared/ic_restart.svg) no-repeat center/100%;
    --webkit-mask: url(https://cdn.bfree.ai/shared/ic_restart.svg) no-repeat center/100%;
  }

  a11y-view[data-type="feature-readingDocument-control-2"]::after {
    mask: url(https://cdn.bfree.ai/shared/ic_play.svg) no-repeat center/100%;
    --webkit-mask: url(https://cdn.bfree.ai/shared/ic_play.svg) no-repeat center/100%;
  }

  &[data-ispaused="false"][data-isplaying="false"] {
    a11y-view[data-type="feature-readingDocument-control-1"] {
      opacity: 0.5;
      cursor: not-allowed;
    }
  }

  &[data-isplaying="true"] {
    border-color: var(--a11y-color-border-primary);

    a11y-view[data-type="feature-readingDocument-icon"] {
      background-color: var(--a11y-color-primary);
    }
    a11y-view[role="heading"] {
      color: var(--a11y-color-primary);
    }
    a11y-view[data-type="feature-readingDocument-narator"],
    a11y-view[data-type="feature-readingDocument-control-1"] {
      border-color: var(--a11y-color-primary);
      &::after {
        background-color: var(--a11y-color-primary);
      }
    }
    a11y-view[data-type="feature-readingDocument-control-1"]::after {
      width: 70%;
      height: 70%;
      mask: url(https://cdn.bfree.ai/shared/ic_stop.svg) no-repeat center/100%;
      --webkit-mask: url(https://cdn.bfree.ai/shared/ic_stop.svg) no-repeat center/100%;
    }
    a11y-view[data-type="feature-readingDocument-control-2"]::after {
      width: 70%;
      height: 70%;
      mask: url(https://cdn.bfree.ai/shared/ic_pause.svg) no-repeat center/100%;
      --webkit-mask: url(https://cdn.bfree.ai/shared/ic_pause.svg) no-repeat center/100%;
    }
  }
}

@media screen and (max-width: 520px) {
  a11y-view[data-type="features"]
    a11y-view[data-type="feature-readingDocument"] {
    gap: 16px;
    flex-direction: column;

    a11y-view[data-type="feature-readingDocument-heading"] {
      flex-direction: column;
      gap: 8px;
    }
  }
}

/*
  ----- Widget Footer -----
*/

a11y-view[data-type="widget-footer"] {
  order: 3;
  background-color: var(--a11y-color-background);
  padding: 10px;
  font-size: 14px;
  border-top: 1px solid var(--a11y-color-border);
  text-align: center;

  a11y-view {
    font-size: inherit;
  }
}

a11y-view[data-type="widget-footer"] a {
  color: inherit;
  text-decoration: none;
}

a11y-view[data-type="widget-footer"] a:hover {
  color: var(--a11y-color-primary);
}

/*
  ----- Feture Implementation -----
*/

body.a11y-grayscale::after,
body.a11y-higherContrast::after,
body.a11y-invertColors::after,
body.a11y-reduceBrightness::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2147483646;
  display: initial !important;
}

body.a11y-reduceTransparency {
  & > *:not(a11y-widget):not(script):not(noscript),
  & > *:not(a11y-widget):not(script):not(noscript) * {
    background: solid !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
  }
}

body.a11y-focusText {
  & > *:not(a11y-widget):not(script):not(noscript),
  & > *:not(a11y-widget):not(script):not(noscript) * {
    color: #000 !important;
    background-color: transparent !important;
    background-image: none !important;
    letter-spacing: 0px !important;
  }
}

body.a11y-dyslexic {
  & > *:not(a11y-widget):not(script):not(noscript),
  & > *:not(a11y-widget):not(script):not(noscript) * {
    font-family: "Open Dyslexic", Arial, Helvetica, sans-serif !important;
  }
}

body.a11y-fontSystem {
  & > *:not(a11y-widget):not(script):not(noscript),
  & > *:not(a11y-widget):not(script):not(noscript) * {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
      Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
      sans-serif !important;
  }
}

body.a11y-highlightHeading {
  & > h1,
  & > h2,
  & > h3,
  & > h4,
  & > h5,
  & > h6,
  & > *:not(a11y-widget):not(script):not(noscript) h1,
  & > *:not(a11y-widget):not(script):not(noscript) h2,
  & > *:not(a11y-widget):not(script):not(noscript) h3,
  & > *:not(a11y-widget):not(script):not(noscript) h4,
  & > *:not(a11y-widget):not(script):not(noscript) h5,
  & > *:not(a11y-widget):not(script):not(noscript) h6 {
    outline: 3px solid rgb(255, 100, 0) !important;
  }
}

body.a11y-highlightLink {
  & > a,
  & > *:not(a11y-widget):not(script):not(noscript) a {
    background: #000 !important;
    color: #fff !important;
    text-decoration: underline !important;
    outline: 3px solid rgb(255, 100, 0) !important;
  }
  & > a *,
  & > *:not(a11y-widget):not(script):not(noscript) a * {
    background: #000 !important;
    color: #fff !important;
    text-decoration: underline !important;
  }
}

body.a11y-hideImage {
  & > *:not(a11y-widget):not(script):not(noscript),
  & > *:not(a11y-widget):not(script):not(noscript) * {
    background-image: none !important;
  }
  & > img,
  & > video,
  & > *:not(a11y-widget):not(script):not(noscript) img,
  & > *:not(a11y-widget):not(script):not(noscript) video {
    visibility: hidden !important;
  }
}

body.a11y-largerCursor,
body.a11y-largerCursor * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M20.978 13.21a1 1 0 0 0-.396-1.024l-14-10a.999.999 0 0 0-1.575.931l2 17a1 1 0 0 0 1.767.516l3.612-4.416 3.377 5.46 1.701-1.052-3.357-5.428 6.089-1.218a.995.995 0 0 0 .782-.769z'/%3E%3C/svg%3E")
      6 0,
    pointer !important;
}

body.a11y-reduceMovements {
  & > *:not(a11y-widget):not(script):not(noscript),
  & > *:not(a11y-widget):not(script):not(noscript) *,
  & > *:not(a11y-widget):not(script):not(noscript) *:hover,
  & > *:not(a11y-widget):not(script):not(noscript) *:active,
  & > *:not(a11y-widget):not(script):not(noscript) *:focus,
  & > *:not(a11y-widget):not(script):not(noscript) *::after,
  & > *:not(a11y-widget):not(script):not(noscript) *::before {
    transition: none !important;
    animation-duration: 0s !important;
    animation-fill-mode: forwards !important;
  }
}

@media screen and (max-width: 640px) {
  a11y-widget {
    font-size: 14px;
  }

  a11y-main {
    transform: translate(0) !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }
}

a11y-view[data-type="feature-item-textMagnifier-impl"] {
  display: none;
}

body.a11y-textMagnifier a11y-view[data-type="feature-item-textMagnifier-impl"] {
  display: block;

  a11y-view {
    content: "";
    position: fixed;
    z-index: 2147483646;
    left: 50%;
    transform: translateX(-50%);
    background-color: #3e3e3e;
    color: #fefefe;
    padding: 12px;
    border-radius: 4px;
    font-size: 32px;
    line-height: 130%;
    box-shadow: 8px 8px 24px -4px rgba(0, 0, 0, 0.5);
  }
}

body.a11y-readingGuide
  a11y-view[data-type="feature-item-readingGuide-impl"]::before {
  content: "";
  position: fixed;
  z-index: 2147483647;
  display: block;
  top: calc(var(--posY) + 4px);
  left: var(--posX);
  transform: translateX(-50%);
  width: 90%;
  max-width: 480px;
  height: 12px;
  background-color: var(--a11y-color-primary);
  border: 4px solid black;
  border-radius: 50px;
}

body.a11y-readingMask
  a11y-view[data-type="feature-item-readingMask-impl"]::before {
  content: "";
  position: fixed;
  z-index: 2147483647;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(var(--posY) - 75px);
  background-color: rgba(0, 0, 0, 0.5);
}

body.a11y-readingMask
  a11y-view[data-type="feature-item-readingMask-impl"]::after {
  content: "";
  position: fixed;
  z-index: 2147483647;
  display: block;
  bottom: 0;
  left: 0;
  width: 100%;
  height: calc(100vh - var(--posY) - 75px);
  background-color: rgba(0, 0, 0, 0.5);
}

/*
  ----- Extra -----
*/

body.a11y-exclude-hideImage {
  & > *:not(a11y-widget):not(script):not(noscript),
  & > *:not(a11y-widget):not(script):not(noscript) * {
    background-image: initial !important;
  }

  & > img,
  & > video,
  & > *:not(a11y-widget):not(script):not(noscript) img,
  & > *:not(a11y-widget):not(script):not(noscript) video {
    visibility: visible !important;
  }
}