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

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

#plus,
#minus {
  display: inline-flex;
  position: relative;
  align-items: center;
  width: 26px;
  height: 26px;
}

#plus:after,
#minus:after {
  width: 26px;
  height: 26px;
  cursor: pointer;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  display: inline-flex;
  background: var(--color-blue);
  content: '';
}

#plus:before,
#minus:before {
  content: '-1';
  position: absolute;
  top: -7px;
  left: 3px;
  font-weight: bold;
  color: var(--color-dark-grey);
  font-size: 18px;
  transition: opacity 0.6s, top 0.6s;
  z-index: -1;
  visibility: hidden;
}

#plus:before {
  content: '+1';
}

#plus.click:before,
#minus.click:before {
  opacity: 0;
  top: -27px;
  z-index: 1;
  visibility: visible;
}

.hidden {
  display: none !important;
}

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

#value {
  margin-right: 6px;
  font-weight: 600;
  font-size: 13px;
  line-height: 20px;
  color: #fff;
  border-radius: 3px;
  padding: 0px 5px;
  text-decoration: none;
}

#value.negative {
  background: #656e7c;
}

#value.minus {
  background: #ff6d6d;
}

#value.normal {
  background: #c3ccd5;
}

#value.plus {
  background: #b5d200;
}

#value.max {
  background: #5cd969;
}

#plus::after {
  -webkit-mask-image: url(../../css/img/icons/plus.svg);
  mask-image: url(../../css/img/icons/plus.svg);
}

#minus::after {
  -webkit-mask-image: url(../../css/img/icons/minus.svg);
  mask-image: url(../../css/img/icons/minus.svg);
}

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