.ui-button {
  display: inline-block;
  padding: 12px 20px;
  border-radius: 50px;
  font-size: var(--font-size-s);
  line-height: var(--line-height-s);
  font-weight: var(--font-weight-medium);
  text-align: center;
  transition: color var(--transition), opacity var(--transition), background-color var(--transition);
}
.ui-button._disabled {
  opacity: 0.5;
  pointer-events: none;
}
.ui-button._color-white {
  color: var(--color-black);
  background-color: var(--color-white-2);
}
@media (hover: hover) {
  .ui-button._color-white:hover {
    color: var(--color-white-2);
    background-color: var(--color-blue-4);
  }
}
.ui-button._color-green {
  color: var(--color-black);
  background-color: var(--color-green);
}
@media (hover: hover) {
  .ui-button._color-green:hover {
    color: var(--color-black);
    background-color: var(--color-green-1);
  }
}
.ui-button._color-white-green {
  color: var(--color-black);
  background-color: var(--color-white-2);
}
@media (hover: hover) {
  .ui-button._color-white-green:hover {
    color: var(--color-black);
    background-color: var(--color-green-1);
  }
}