svg {
  fill: currentColor;
}

:host {
  --unfilled-arrow: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB3aWR0aD0iMTZweCIgaGVpZ2h0PSI4cHgiIHZpZXdCb3g9IjAgMCAxNiA4IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxkZWZzPgogICAgPHBhdGggaWQ9InEzcXRvendoeGEiIGQ9Ik00Ljc2NiA3Yy41NTIgMCAxIC40NDggMSAxIDAgLjIyNS0uMDc2LjQ0NC0uMjE2LjYybC0xLjc2NiAyLjIzNGMtLjM0Mi40MzMtLjk3MS41MDYtMS40MDQuMTY0LS4wNjEtLjA0OS0uMTE2LS4xMDQtLjE2NC0uMTY0TC40NSA4LjYyQy4xMDcgOC4xODcuMTggNy41NTguNjE0IDcuMjE2Yy4xNzYtLjE0LjM5NS0uMjE2LjYyLS4yMTZoMy41MzJ6TTQuNDIgOEgxLjU4MWMtLjA0NSAwLS4wODkuMDE1LS4xMjQuMDQzLS4wNy4wNTUtLjA5My4xNDYtLjA2NC4yMjVsLjAzLjA1NiAxLjE4NSAxLjQ5OWMuMDI0LjAzLjA1MS4wNTguMDgyLjA4Mi4xOTMuMTUzLjQ2My4xNC42NC0uMDE3bC4wNjItLjA2NSAxLjE4NC0xLjVjLjAyOC0uMDM0LjA0My0uMDc4LjA0My0uMTIzIDAtLjExLS4wOS0uMi0uMi0uMnpNMy42Mi45ODJjLjA2MS4wNDkuMTE2LjEwNC4xNjQuMTY0TDUuNTUgMy4zOGMuMzQzLjQzMy4yNyAxLjA2Mi0uMTY0IDEuNDA0LS4xNzYuMTQtLjM5NS4yMTYtLjYyLjIxNkgxLjIzNGMtLjU1MiAwLTEtLjQ0OC0xLTEgMC0uMjI1LjA3Ni0uNDQ0LjIxNi0uNjJsMS43NjYtMi4yMzRDMi41NTguNzEzIDMuMTg3LjY0IDMuNjIuOTgyem0tLjk1IDEuMTNsLS4wNjIuMDY1LTEuMTg0IDEuNWMtLjAyOC4wMzQtLjA0My4wNzgtLjA0My4xMjMgMCAuMTEuMDkuMi4yLjJoMi44MzhjLjA0NSAwIC4wODktLjAxNS4xMjQtLjA0My4wNy0uMDU1LjA5My0uMTQ2LjA2NC0uMjI1bC0uMDMtLjA1Ni0xLjE4NS0xLjQ5OWMtLjAyNC0uMDMtLjA1MS0uMDU4LS4wODItLjA4Mi0uMTkzLS4xNTMtLjQ2My0uMTQtLjY0LjAxN3oiLz4KICA8L2RlZnM+CiAgPGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiB0cmFuc2Zvcm09Im1hdHJpeCgxLCAwLCAwLCAxLCA0LjAxNjEyOCwgLTIuMSkiPgogICAgPHBhdGggZD0iTSA1LjkgMy4yIEMgNi40OTggMy4yIDYuOTg0IDMuNjg2IDYuOTg0IDQuMjg0IEMgNi45ODQgNC41MjkgNi45MDEgNC43NjYgNi43NSA0Ljk1NyBMIDQuODM0IDcuMzggQyA0LjQ2MyA3Ljg0OSAzLjc4MSA3LjkyOSAzLjMxMSA3LjU1OCBDIDMuMjQ1IDcuNTA0IDMuMTg2IDcuNDQ0IDMuMTM0IDcuMzggTCAxLjIxOCA0Ljk1NyBDIDAuODQ2IDQuNDg3IDAuOTI2IDMuODA1IDEuMzk2IDMuNDM0IEMgMS41ODcgMy4yODIgMS44MjUgMy4yIDIuMDY4IDMuMiBMIDUuOSAzLjIgWiBNIDUuNTI0IDQuMjg0IEwgMi40NDQgNC4yODQgQyAyLjM5NiA0LjI4NCAyLjM0OCA0LjMwMSAyLjMxMSA0LjMzMSBDIDIuMjM0IDQuMzkxIDIuMjEgNC40ODkgMi4yNCA0LjU3NSBMIDIuMjc0IDQuNjM2IEwgMy41NTkgNi4yNjIgQyAzLjU4NCA2LjI5NCAzLjYxNCA2LjMyNCAzLjY0OCA2LjM1MSBDIDMuODU3IDYuNTE2IDQuMTUgNi41MDIgNC4zNDIgNi4zMzIgTCA0LjQwOSA2LjI2MiBMIDUuNjkzIDQuNjM1IEMgNS43MjQgNC41OTggNS43NCA0LjU1IDUuNzQgNC41MDEgQyA1Ljc0IDQuMzgyIDUuNjQyIDQuMjg0IDUuNTIyIDQuMjg0IEwgNS41MjQgNC4yODQgWiIgZmlsbD0iI0Q4RDhEOCIvPgogIDwvZz4KPC9zdmc+");
  --filled-unchecked-arrow: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB3aWR0aD0iMTZweCIgaGVpZ2h0PSI4cHgiIHZpZXdCb3g9IjAgMCAxNiA4IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxkZWZzPgogICAgPHBhdGggaWQ9InEzcXRvendoeGEiIGQ9Ik00Ljc2NiA3Yy41NTIgMCAxIC40NDggMSAxIDAgLjIyNS0uMDc2LjQ0NC0uMjE2LjYybC0xLjc2NiAyLjIzNGMtLjM0Mi40MzMtLjk3MS41MDYtMS40MDQuMTY0LS4wNjEtLjA0OS0uMTE2LS4xMDQtLjE2NC0uMTY0TC40NSA4LjYyQy4xMDcgOC4xODcuMTggNy41NTguNjE0IDcuMjE2Yy4xNzYtLjE0LjM5NS0uMjE2LjYyLS4yMTZoMy41MzJ6TTQuNDIgOEgxLjU4MWMtLjA0NSAwLS4wODkuMDE1LS4xMjQuMDQzLS4wNy4wNTUtLjA5My4xNDYtLjA2NC4yMjVsLjAzLjA1NiAxLjE4NSAxLjQ5OWMuMDI0LjAzLjA1MS4wNTguMDgyLjA4Mi4xOTMuMTUzLjQ2My4xNC42NC0uMDE3bC4wNjItLjA2NSAxLjE4NC0xLjVjLjAyOC0uMDM0LjA0My0uMDc4LjA0My0uMTIzIDAtLjExLS4wOS0uMi0uMi0uMnpNMy42Mi45ODJjLjA2MS4wNDkuMTE2LjEwNC4xNjQuMTY0TDUuNTUgMy4zOGMuMzQzLjQzMy4yNyAxLjA2Mi0uMTY0IDEuNDA0LS4xNzYuMTQtLjM5NS4yMTYtLjYyLjIxNkgxLjIzNGMtLjU1MiAwLTEtLjQ0OC0xLTEgMC0uMjI1LjA3Ni0uNDQ0LjIxNi0uNjJsMS43NjYtMi4yMzRDMi41NTguNzEzIDMuMTg3LjY0IDMuNjIuOTgyem0tLjk1IDEuMTNsLS4wNjIuMDY1LTEuMTg0IDEuNWMtLjAyOC4wMzQtLjA0My4wNzgtLjA0My4xMjMgMCAuMTEuMDkuMi4yLjJoMi44MzhjLjA0NSAwIC4wODktLjAxNS4xMjQtLjA0My4wNy0uMDU1LjA5My0uMTQ2LjA2NC0uMjI1bC0uMDMtLjA1Ni0xLjE4NS0xLjQ5OWMtLjAyNC0uMDMtLjA1MS0uMDU4LS4wODItLjA4Mi0uMTkzLS4xNTMtLjQ2My0uMTQtLjY0LjAxN3oiLz4KICA8L2RlZnM+CiAgPGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiB0cmFuc2Zvcm09Im1hdHJpeCgxLCAwLCAwLCAxLCA0LjAxNjEyOCwgLTIuMSkiPgogICAgPHBhdGggZD0iTSA1LjkgMy4yIEMgNi40OTggMy4yIDYuOTg0IDMuNjg2IDYuOTg0IDQuMjg0IEMgNi45ODQgNC41MjkgNi45MDEgNC43NjYgNi43NSA0Ljk1NyBMIDQuODM0IDcuMzggQyA0LjQ2MyA3Ljg0OSAzLjc4MSA3LjkyOSAzLjMxMSA3LjU1OCBDIDMuMjQ1IDcuNTA0IDMuMTg2IDcuNDQ0IDMuMTM0IDcuMzggTCAxLjIxOCA0Ljk1NyBDIDAuODQ2IDQuNDg3IDAuOTI2IDMuODA1IDEuMzk2IDMuNDM0IEMgMS41ODcgMy4yODIgMS44MjUgMy4yIDIuMDY4IDMuMiBMIDUuOSAzLjIgWiIgZmlsbD0iI0Q4RDhEOCIvPgogIDwvZz4KPC9zdmc+");
  --filled-checked-arrow: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB3aWR0aD0iMTZweCIgaGVpZ2h0PSI4cHgiIHZpZXdCb3g9IjAgMCAxNiA4IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxkZWZzPgogICAgPHBhdGggaWQ9InEzcXRvendoeGEiIGQ9Ik00Ljc2NiA3Yy41NTIgMCAxIC40NDggMSAxIDAgLjIyNS0uMDc2LjQ0NC0uMjE2LjYybC0xLjc2NiAyLjIzNGMtLjM0Mi40MzMtLjk3MS41MDYtMS40MDQuMTY0LS4wNjEtLjA0OS0uMTE2LS4xMDQtLjE2NC0uMTY0TC40NSA4LjYyQy4xMDcgOC4xODcuMTggNy41NTguNjE0IDcuMjE2Yy4xNzYtLjE0LjM5NS0uMjE2LjYyLS4yMTZoMy41MzJ6TTQuNDIgOEgxLjU4MWMtLjA0NSAwLS4wODkuMDE1LS4xMjQuMDQzLS4wNy4wNTUtLjA5My4xNDYtLjA2NC4yMjVsLjAzLjA1NiAxLjE4NSAxLjQ5OWMuMDI0LjAzLjA1MS4wNTguMDgyLjA4Mi4xOTMuMTUzLjQ2My4xNC42NC0uMDE3bC4wNjItLjA2NSAxLjE4NC0xLjVjLjAyOC0uMDM0LjA0My0uMDc4LjA0My0uMTIzIDAtLjExLS4wOS0uMi0uMi0uMnpNMy42Mi45ODJjLjA2MS4wNDkuMTE2LjEwNC4xNjQuMTY0TDUuNTUgMy4zOGMuMzQzLjQzMy4yNyAxLjA2Mi0uMTY0IDEuNDA0LS4xNzYuMTQtLjM5NS4yMTYtLjYyLjIxNkgxLjIzNGMtLjU1MiAwLTEtLjQ0OC0xLTEgMC0uMjI1LjA3Ni0uNDQ0LjIxNi0uNjJsMS43NjYtMi4yMzRDMi41NTguNzEzIDMuMTg3LjY0IDMuNjIuOTgyem0tLjk1IDEuMTNsLS4wNjIuMDY1LTEuMTg0IDEuNWMtLjAyOC4wMzQtLjA0My4wNzgtLjA0My4xMjMgMCAuMTEuMDkuMi4yLjJoMi44MzhjLjA0NSAwIC4wODktLjAxNS4xMjQtLjA0My4wNy0uMDU1LjA5My0uMTQ2LjA2NC0uMjI1bC0uMDMtLjA1Ni0xLjE4NS0xLjQ5OWMtLjAyNC0uMDMtLjA1MS0uMDU4LS4wODItLjA4Mi0uMTkzLS4xNTMtLjQ2My0uMTQtLjY0LjAxN3oiLz4KICA8L2RlZnM+CiAgPGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiB0cmFuc2Zvcm09Im1hdHJpeCgxLCAwLCAwLCAxLCA0LjAxNjEyOCwgLTIuMSkiPgogICAgPHBhdGggZD0iTSA1LjkgMy4yIEMgNi40OTggMy4yIDYuOTg0IDMuNjg2IDYuOTg0IDQuMjg0IEMgNi45ODQgNC41MjkgNi45MDEgNC43NjYgNi43NSA0Ljk1NyBMIDQuODM0IDcuMzggQyA0LjQ2MyA3Ljg0OSAzLjc4MSA3LjkyOSAzLjMxMSA3LjU1OCBDIDMuMjQ1IDcuNTA0IDMuMTg2IDcuNDQ0IDMuMTM0IDcuMzggTCAxLjIxOCA0Ljk1NyBDIDAuODQ2IDQuNDg3IDAuOTI2IDMuODA1IDEuMzk2IDMuNDM0IEMgMS41ODcgMy4yODIgMS44MjUgMy4yIDIuMDY4IDMuMiBMIDUuOSAzLjIgWiIgc3R5bGU9ImZpbGw6IHJnYigwLCAxNjUsIDI1NSk7Ii8+CiAgPC9nPgo8L3N2Zz4=");

  display: flex;
  flex-direction: row;
  align-items: center;
}

form {
  display: inline-grid;
  grid-template-rows: repeat(2, 1fr);
  grid-template-areas: 'up' 'down';
  vertical-align: middle;
  width: 20px;
  gap: 2px;
  align-items: center;
}

input {
  opacity: 0;
  margin: 0;
  padding: 0;
  display: block;
  width: 100%;
  pointer-events: none;
  height: 100%;
}

input,
label {
  cursor: pointer;
}

label {
  display: block;
  background-repeat: no-repeat;
  background-size: cover;
  width: 22px;
  height: 8px;
  background-image: var(--filled-unchecked-arrow);
  transition: transform 0.1s ease-in-out;
}

:checked + label {
  color: var(--fc-gray-800);
  background-image: var(--filled-checked-arrow);
}

:host([direction=""]) label,
:host(:not([direction])) label {
  background-image: var(--unfilled-arrow);
}

:host([direction=""]) label:hover,
:host(:not([direction])) label:hover {
  background-image: var(--filled-unchecked-arrow);
}

#asc + label {
  transform: rotate(180deg);
}

#asc,
#asc + label {
  grid-area: up;
}

#desc,
#desc + label {
  grid-area: down;
}

:host([direction="asc"]) #asc + label:hover,
:host([direction="desc"]) #asc + label:hover {
  transform: rotate(180deg) scale(1.15);
}

:host([direction="asc"]) #desc + label:hover,
:host([direction="desc"]) #desc + label:hover {
  transform: scale(1.15);
}

span {
  font-size: 10px;
  display: inline-block;
  font-weight: 600;
  min-width: 8px;
  color: var(--fc-blue-500);
  line-height: 7px;
}

:host([prevent-secondary-sort]) span {
  display: none;
}