* {
  margin: 0;
  padding: 0;
  line-height: 100%;
}
:host {
  position: relative;
}

#wrapper {
  position: relative;
  z-index: 999;
  display: flex;
  align-items: center;
}

#plus,
#minus {
  width: 18px;
  height: 18px;
  cursor: pointer;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  display: inline-flex;
  /*background: var(--color-grey);*/
  background: var(--color-blue);
}

:host([blue]) #plus,
:host([blue]) #minus {
  background: var(--color-blue);
}

:host([disabled]) #plus,
:host([disabled]) #minus,
.opacity {
  opacity: 0.5;
  cursor: default !important;
}

#value {
  margin: 0 6px;
}

#plus {
  -webkit-mask-image: url(../../css/img/icons/rigth.svg);
  mask-image: url(../../css/img/icons/rigth.svg);
  transform: rotate(-90deg);
}
#minus {
  -webkit-mask-image: url(../../css/img/icons/rigth.svg);
  mask-image: url(../../css/img/icons/rigth.svg);
  transform: rotate(90deg);
}


#plus.like{
  -webkit-mask-image: url(../../css/img/icons/vdohnovenie.svg);
  mask-image: url(../../css/img/icons/vdohnovenie.svg);
  transform: none;
} 

@media (max-width: 767px) {
  #plus,
  #minus {
    width: 20px;
    height: 19px;
  }
}