#wcag-dock .wcag-fab {
  position: fixed;
  right: max(8px, env(safe-area-inset-right));
  top: calc(var(--topbar-h, 48px) + 20px);
  z-index: 10001;
  width: 30px;
  height: 40px;
  min-width: 40px;
  padding: 0;
  border-radius: 50%;
  border: 0;
  background: transparent !important;
  box-shadow: none;
}

#wcag-dock .wcag-fab::before {
  content: "";
  display: block;
  width: 40px;
  height: 40px;
  /* background: currentColor; */
  background: transparent url("../img/accessibility.png") center/contain
    no-repeat;
  -webkit-mask: none !important;
  mask: none !important;
  /* mask: url("../img/accessibility.png") center/contain no-repeat; */
  /* 
  pointer-events: none; */
}

@media (max-width: 767.98px) {
  #wcag-dock {
    --wcag-toolbar-scale: 1;
    --wcag-btn-d: 44px;
    --wcag-dock-offset: 0px;
  }
  #wcag-dock .wcag-toolbar {
    position: fixed;
    right: max(8px, env(safe-area-inset-right));
    top: calc(var(--topbar-h, 48px) + 8px);
    z-index: 10000;
    display: none;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    margin: 0;
    width: auto;
    white-space: nowrap;
    background: transparent;
    transform: scale(var(--wcag-toolbar-scale));
    transform-origin: top right;
    outline: none;
    box-shadow: none;
  }
  #wcag-dock.is-open .wcag-toolbar {
    display: flex;
    top: calc(var(--topbar-h, 48px) + 8px + 52px);
  }
  #wcag-dock .wcag-toolbar .wcag-group {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
  }
  #wcag-dock .wcag-toolbar .wcag-group + .wcag-group {
    margin-top: 8px;
  }
  #wcag-dock .wcag-btn,
  #wcag-dock .wcag-indicator {
    width: var(--wcag-btn-d);
    height: var(--wcag-btn-d);
    min-width: var(--wcag-btn-d);
    border-radius: 50%;
    padding: 0;
    display: inline-grid;
    place-items: center;
    line-height: 1;
    font-size: 14px;
  }
  #wcag-dock .wcag-indicator .val {
    font-size: 12px;
  }
}

@media (min-width: 768px) {
  #wcag-dock .wcag-fab {
    display: none;
  }
}