#a11y-toolbar {
  z-index: 9999;
  align-items: center;
  flex-direction: column-reverse;
  gap: 0.5em;
  display: flex;
}

/* default closed */
#a11y-toolbar .a11y {
	display: none;
  transition: ease-in-out;
  color: #000;
}

/* open only when toolbar is open */
#a11y-toolbar.is-open .a11y {
	display: block;
}

button.a11y__button,
button.a11y__toggle {
  box-sizing: content-box;
  position: relative;
  display: block;
  transition: ease-in-out;
  border: 3px solid #fff;
  border-radius: 9999px;
  padding: 0;
  background-color: #fff;
  color: #000;
  height: 38px;
  aspect-ratio: 1;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.12),
    0 1px 2px rgba(0, 0, 0, 0.24);
}

button.a11y__button {
  border-radius: 6px;
}

button.a11y__button:not(:last-child) {
  margin-bottom: 0.25em;
}

button.a11y__button.active {
  background-color: royalblue;
}

button.a11y__button.active::before {
  filter: invert(100%);
}

button.a11y__button::before,
button.a11y__toggle::before {
  content: "";
  display: block;
  height: 38px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 1.25em;
}

button.a11y__toggle {
  border-radius: 9999px;
  z-index: 10000;
}

button.a11y__toggle::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 512 512' %3E%3Cpath d='M256,112a56,56,0,1,1,56-56A56.06,56.06,0,0,1,256,112Z'/%3E%3Cpath d='M432,112.8l-.45.12h0l-.42.13c-1,.28-2,.58-3,.89-18.61,5.46-108.93,30.92-172.56,30.92-59.13,0-141.28-22-167.56-29.47a73.79,73.79,0,0,0-8-2.58c-19-5-32,14.3-32,31.94,0,17.47,15.7,25.79,31.55,31.76v.28l95.22,29.74c9.73,3.73,12.33,7.54,13.6,10.84,4.13,10.59.83,31.56-.34,38.88l-5.8,45L150.05,477.44q-.15.72-.27,1.47l-.23,1.27h0c-2.32,16.15,9.54,31.82,32,31.82,19.6,0,28.25-13.53,32-31.94h0s28-157.57,42-157.57,42.84,157.57,42.84,157.57h0c3.75,18.41,12.4,31.94,32,31.94,22.52,0,34.38-15.74,32-31.94-.21-1.38-.46-2.74-.76-4.06L329,301.27l-5.79-45c-4.19-26.21-.82-34.87.32-36.9a1.09,1.09,0,0,0,.08-.15c1.08-2,6-6.48,17.48-10.79l89.28-31.21a16.9,16.9,0,0,0,1.62-.52c16-6,32-14.3,32-31.93S451,107.81,432,112.8Z'/%3E%3C/svg%3E");
}

.a11y__button[value="text-align"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3.75 6.75h16.5M3.75 12H12m-8.25 5.25h16.5' /%3E%3C/svg%3E%0A");
}

.a11y__button[value="contrast"]::before {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;'%3E%3Cpath d='M21,12C21,16.971 16.971,21 12,21C7.029,21 3,16.971 3,12C3,7.029 7.029,3 12,3C16.971,3 21,7.029 21,12Z' style='fill:none;fill-rule:nonzero;stroke:black;stroke-width:1.5px;'/%3E%3Cg transform='matrix(0.549972,-0.549972,0.549972,0.549972,-1.19933,12)'%3E%3Cpath d='M21,12C21,16.971 16.971,21 12,21C7.029,21 3,16.971 3,12C3,11.893 21,11.893 21,12Z' style='fill-rule:nonzero;'/%3E%3C/g%3E%3C/svg%3E%0A");
}

.a11y__button[value="cursor"]::before {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;'%3E%3Cg transform='matrix(1.53872,0,0,1.53872,-8.75889,-11.8717)'%3E%3Cpath d='M15.042,21.672L13.684,16.601' style='fill:none;stroke:black;stroke-width:0.97px;'/%3E%3C/g%3E%3Cg transform='matrix(1.53872,0,0,1.53872,-8.75889,-11.8717)'%3E%3Cpath d='M13.684,16.601L11.174,18.826L11.743,9.356L16.97,17.273L13.684,16.601' style='fill:none;stroke:black;stroke-width:0.97px;'/%3E%3C/g%3E%3C/svg%3E%0A");
}

.a11y__button[value="images"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z' /%3E%3C/svg%3E%0A");
}

.a11y__button[value="links"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor' %3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244' /%3E%3C/svg%3E%0A");
}

.a11y__button[value="font-size"]::before {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E%3Cg transform='matrix(1,0,0,1,-0.596822,-0.906956)'%3E%3Cg transform='matrix(1.23726,0,0,1.23726,8.52665,-5.32557)'%3E%3Cpath d='M6.962,11.715L6.962,17.763L7.77,17.763C8.059,17.763 8.265,17.819 8.388,17.93C8.511,18.041 8.573,18.187 8.573,18.367C8.573,18.542 8.511,18.686 8.388,18.797C8.265,18.909 8.059,18.964 7.77,18.964L4.958,18.964C4.669,18.964 4.463,18.909 4.34,18.797C4.217,18.686 4.155,18.54 4.155,18.361C4.155,18.185 4.217,18.041 4.34,17.93C4.463,17.819 4.669,17.763 4.958,17.763L5.76,17.763L5.76,11.715L4.46,11.715L4.46,12.852C4.46,13.141 4.404,13.347 4.293,13.47C4.181,13.593 4.036,13.655 3.856,13.655C3.68,13.655 3.537,13.593 3.426,13.47C3.314,13.347 3.259,13.141 3.259,12.852L3.259,10.508L9.481,10.514L9.481,12.852C9.481,13.141 9.426,13.347 9.314,13.47C9.203,13.593 9.057,13.655 8.878,13.655C8.702,13.655 8.558,13.593 8.447,13.47C8.336,13.347 8.28,13.141 8.28,12.852L8.28,11.715L6.962,11.715Z' style='fill-rule:nonzero;'/%3E%3C/g%3E%3Cg transform='matrix(0.838557,0,0,0.838557,2.20382,0.549791)'%3E%3Cpath d='M6.962,11.715L6.962,17.763L7.77,17.763C8.059,17.763 8.265,17.819 8.388,17.93C8.511,18.041 8.573,18.187 8.573,18.367C8.573,18.542 8.511,18.686 8.388,18.797C8.265,18.909 8.059,18.964 7.77,18.964L4.958,18.964C4.669,18.964 4.463,18.909 4.34,18.797C4.217,18.686 4.155,18.54 4.155,18.361C4.155,18.185 4.217,18.041 4.34,17.93C4.463,17.819 4.669,17.763 4.958,17.763L5.76,17.763L5.76,11.715L4.46,11.715L4.46,12.852C4.46,13.141 4.404,13.347 4.293,13.47C4.181,13.593 4.036,13.655 3.856,13.655C3.68,13.655 3.537,13.593 3.426,13.47C3.314,13.347 3.259,13.141 3.259,12.852L3.259,10.508L9.481,10.514L9.481,12.852C9.481,13.141 9.426,13.347 9.314,13.47C9.203,13.593 9.057,13.655 8.878,13.655C8.702,13.655 8.558,13.593 8.447,13.47C8.336,13.347 8.28,13.141 8.28,12.852L8.28,11.715L6.962,11.715Z' style='fill-rule:nonzero;'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
}

.a11y__button[value="letter-spacing"]::before {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E%3Cg transform='matrix(1.24465,0,0,1.24465,-2.65555,10.3145)'%3E%3Cpath d='M8.568,2.974L5.65,2.974L5.357,3.707L5.65,3.707C5.939,3.707 6.146,3.762 6.269,3.874C6.392,3.985 6.453,4.131 6.453,4.31C6.453,4.486 6.392,4.63 6.269,4.741C6.146,4.852 5.939,4.908 5.65,4.908L4.033,4.908C3.744,4.908 3.538,4.852 3.415,4.741C3.292,4.63 3.23,4.484 3.23,4.304C3.23,4.125 3.295,3.978 3.424,3.865C3.553,3.752 3.766,3.699 4.063,3.707L5.949,-0.993L5.164,-0.993C4.875,-0.993 4.669,-1.048 4.546,-1.16C4.423,-1.271 4.361,-1.416 4.361,-1.596C4.361,-1.776 4.423,-1.921 4.546,-2.033C4.669,-2.144 4.875,-2.2 5.164,-2.2L7.76,-2.194L10.15,3.707C10.432,3.707 10.617,3.738 10.707,3.8C10.887,3.929 10.977,4.099 10.977,4.31C10.977,4.486 10.916,4.63 10.795,4.741C10.674,4.852 10.469,4.908 10.18,4.908L8.563,4.908C8.273,4.908 8.067,4.852 7.944,4.741C7.821,4.63 7.76,4.484 7.76,4.304C7.76,4.129 7.821,3.985 7.944,3.874C8.067,3.762 8.273,3.707 8.563,3.707L8.855,3.707L8.568,2.974ZM8.07,1.773L7.104,-0.606L6.131,1.773L8.07,1.773Z' style='fill-rule:nonzero;'/%3E%3C/g%3E%3Cg transform='matrix(1.24465,0,0,1.24465,-2.8969,9.44305)'%3E%3Cpath d='M12.868,-1.52L12.868,5.629C12.868,6.039 12.858,6.283 12.839,6.361C12.808,6.478 12.738,6.578 12.631,6.66C12.523,6.742 12.403,6.783 12.271,6.783C12.134,6.783 12.012,6.742 11.904,6.66C11.797,6.578 11.728,6.474 11.696,6.349C11.677,6.279 11.667,6.039 11.667,5.629L11.667,-1.52C11.667,-1.93 11.677,-2.174 11.696,-2.252C11.728,-2.369 11.797,-2.469 11.904,-2.551C12.012,-2.633 12.134,-2.674 12.271,-2.674C12.403,-2.674 12.523,-2.633 12.631,-2.551C12.738,-2.469 12.808,-2.368 12.839,-2.246C12.858,-2.168 12.868,-1.926 12.868,-1.52Z' style='fill-rule:nonzero;'/%3E%3C/g%3E%3Cg transform='matrix(1.24465,0,0,1.24465,-3.36695,10.3145)'%3E%3Cpath d='M14.971,3.707L14.971,-0.993L14.783,-0.993C14.494,-0.993 14.288,-1.048 14.165,-1.16C14.042,-1.271 13.981,-1.416 13.981,-1.596C13.981,-1.776 14.042,-1.921 14.165,-2.033C14.288,-2.144 14.494,-2.2 14.783,-2.2L17.795,-2.2C18.514,-2.2 19.092,-1.999 19.529,-1.599C19.967,-1.199 20.186,-0.723 20.186,-0.172C20.186,0.09 20.135,0.336 20.033,0.566C19.932,0.797 19.777,1.009 19.57,1.205C19.949,1.431 20.233,1.696 20.423,1.999C20.612,2.301 20.707,2.644 20.707,3.027C20.707,3.332 20.639,3.615 20.502,3.877C20.4,4.076 20.275,4.234 20.127,4.351C19.928,4.515 19.684,4.649 19.395,4.753C19.106,4.856 18.744,4.908 18.311,4.908L14.783,4.908C14.494,4.908 14.288,4.852 14.165,4.741C14.042,4.63 13.981,4.484 13.981,4.304C13.981,4.129 14.043,3.985 14.168,3.874C14.293,3.762 14.498,3.707 14.783,3.707L14.971,3.707ZM16.172,0.754L17.49,0.754C17.963,0.754 18.356,0.634 18.668,0.396C18.879,0.236 18.984,0.037 18.984,-0.202C18.984,-0.412 18.885,-0.597 18.686,-0.755C18.486,-0.913 18.17,-0.993 17.736,-0.993L16.172,-0.993L16.172,0.754ZM16.172,3.707L18.246,3.707C18.734,3.707 19.078,3.634 19.277,3.49C19.43,3.381 19.506,3.224 19.506,3.021C19.506,2.779 19.356,2.541 19.055,2.306C18.754,2.072 18.322,1.955 17.76,1.955L16.172,1.955L16.172,3.707Z' style='fill-rule:nonzero;'/%3E%3C/g%3E%3C/svg%3E%0A");
}

.a11y__button[value="line-height"]::before {
  background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 24 24' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;'%3E%3Cpath d='M3,4.5L17.25,4.5M3,9L12.75,9M3,13.5L12.75,13.5M17.25,9L17.25,21M17.25,21L13.5,17.25M17.25,21L21,17.25' style='fill:none;fill-rule:nonzero;stroke:black;stroke-width:1.5px;'/%3E%3C/svg%3E%0A");
}

.a11y__tip {
  position: absolute;
  top: 50%;
  left: calc(100% + 12px);
  display: none;
  transform: translateY(-50%);
  white-space: nowrap;
  border-radius: 6px;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.12),
    0 1px 2px rgba(0, 0, 0, 0.24);
  padding: 0.25em 0.5em;
  font-size: smaller;
  background-color: #000;
  color: #fff;
}

.a11y__tip::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -4px;
  display: block;
  transform: rotate(45deg) translateY(-50%);
  height: 6px;
  width: 6px;
  background-color: #000;
}

.a11y__button:hover .a11y__tip,
.a11y__button:focus .a11y__tip,
.a11y__toggle:hover .a11y__tip,
.a11y__toggle:focus .a11y__tip {
  display: block;
}

button.a11y__toggle,
button.a11y__toggle:hover,
button.a11y__toggle:focus {
  background-color: royalblue;
}

#bds-a11y:focus-within button.a11y__toggle .a11y_tip {
  display: none;
}