.control-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.9375rem;
}
@media (hover: hover) {
  .control-btn {
    cursor: pointer;
  }
  .control-btn:hover:not(.favorite-btn) .control-btn__icon {
    background-color: #2874bb;
  }
  .control-btn:hover:not(.favorite-btn) circle:not([stroke=none]),
.control-btn:hover:not(.favorite-btn) path[stroke="#000"],
.control-btn:hover:not(.favorite-btn) ellipse {
    stroke: #fff;
  }
  .control-btn:hover:not(.favorite-btn) path:not([stroke]):not([fill]) {
    fill: #fff;
  }
}
.control-btn:not(.control-btn--is-gray) .control-btn__icon {
  background-color: #fff;
}
.control-btn--is-gray .control-btn__icon {
  background-color: #f2f2f2;
}
@media (hover: hover) {
  .control-btn:not(.favorite-btn) circle:not([stroke=none]),
.control-btn:not(.favorite-btn) path[stroke="#000"],
.control-btn:not(.favorite-btn) ellipse {
    transition: stroke 300ms ease-in-out 0ms;
  }
}
@media (hover: hover) {
  .control-btn:not(.favorite-btn) path:not([stroke]):not([fill]) {
    transition: fill 300ms ease-in-out 0ms;
  }
}
.control-btn__icon {
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.4375rem;
  height: 2.4375rem;
}
@media (min-width: 1200px) {
  .control-btn__icon {
    width: 3.125rem;
    height: 3.125rem;
  }
}
@media (hover: hover) {
  .control-btn__icon {
    transition: background-color 300ms ease-in-out 0ms;
  }
}
@media (max-width: 991.98px) {
  .control-btn__text {
    font-size: 1.125rem;
    line-height: 1.2222222222;
    font-weight: 500;
    text-transform: uppercase;
    color: #000;
  }
}
@media (max-width: 991.98px) and (hover: hover) {
  .control-btn__text {
    transition: color 300ms ease-in-out 0ms;
  }
}
@media (min-width: 992px) {
  .control-btn__text {
    display: none;
  }
}