Не получается убрать рамку у элемента OpenLayers

Пытаюсь сделать ol-zoom с нужной svg и своим стилем. Получилось переопределить основные css классы ol для контрола zoom и все ок, но непонятно откуда после клика по кнопке берется черно-белая обводка. Не помогает передача названий своих классов в контрол при его создании, ну и вручную отыскать источник не получается (в ol.css). Кто-то сталкивался с этой проблемой? Вот мои стили и то, как выглядит:

#OpenLayers_Control_Zoom_5,
.ol-zoom {
  top: unset;
  left: unset;
  bottom: 60px;
  right: 15px;
  z-index: 901 !important;
  background-color:transparent;
  width:35px;
  height:72px;
  border:none;

  &:hover{
    background-color:transparent;
  }
}
.ol-zoom .zoom-in {
  width:32px;
  height:33px;
  border:none;
  background-color:transparent;
  border-radius:30px;
  background-image:url('../../../public/content/svg/scaleInButton.svg');
  &:hover{
    background-color:rgba(240, 240, 240, .8);
    } 
  &:focus {
  background-color: rgba(240, 240, 240, .0);
  border:none; 
  }
}

.ol-zoom .zoom-out{
  width:32px;
  height:33px;
  border-radius: 33px;
  background-color:transparent;
  font-size: 40px;
  background-image:url('../../../public/content/svg/scaleOutButton.svg');
  &:hover{
    background-color:rgba(240, 240, 240, .9);
    } 
  &:focus {
    background-color: rgba(240, 240, 240, .7);
    border:none;
    }
}