
.caret {
  color: #53565a;
}

.caret::before {
  background-image: url('data:image/svg+xml;utf8,<svg fill="%2353565A" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M11.709 7.294L5.705 1.29a1.002 1.002 0 00-1.413 0 1.001 1.001 0 000 1.413L9.59 8l-5.298 5.296a1.001 1.001 0 000 1.413 1.002 1.002 0 001.413 0l6.004-6.003a1.001 1.001 0 000-1.412z"/></svg>');
  background-position: center center;
  background-repeat: no-repeat;
  content: "";
  width: 1rem;
  height: 1rem;
  display: inline-block;
  position: relative;
  transform: rotate(0deg);
  transition: color 0.25S ease-out, transform 0.25S ease-out;
  vertical-align: middle;
}

@media (prefers-reduced-motion) {  .caret::before {
    transition: color 0.25S ease-out, transform 0s;
  }
}