.knob--arrow {
  position: relative;
  display: flex;
  width: fit-content;
  padding-right: 50px;
}

.knob--arrow::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  width: 27px;
  height: 20px;
  background-size: cover;
  background-image: url('/themes/custom/ebm/images/arrow-white-right.svg');
  transition: background-image .25s ease-in-out;
}

.knob--arrow:hover::after {
  background-image: url('/themes/custom/ebm/images/arrow-blue-right.svg');
}

.knob--zoom {
  position: relative;
  display: flex;
  width: fit-content;
  padding-right: 50px;
}

.knob--zoom::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background-size: cover;
  background-image: url('/themes/custom/ebm/images/magnifier-white.svg');
  transition: background-image .25s ease-in-out;
}

.knob--zoom:hover::after {
  background-image: url('/themes/custom/ebm/images/magnifier.svg');
}


.knob--active {
  color: var(--beforce-blue);
  background-color: #fff;
  border: 1px solid var(--beforce-blue);
}

.knob--lightblue {
  background-color: var(--beforce-lightblue);
  border-color: var(--beforce-lightblue);
  color: #fff;
}

.knob--lightblue:hover {
  background-color: #fff;
  border-color: var(--beforce-lightblue);;
  color: var(--beforce-lightblue);
}

.knob--tag {
  color: var(--beforce-blue);
  border-color: var(--beforce-blue);
  font-weight: 600;
  text-transform: uppercase;
}

.knob--tag:hover,
.knob--tag-active {
  color: #fff;
  background-color: var(--beforce-blue);
  text-transform: uppercase;
}