.Button {
  height: var(--input-height);
  box-sizing: border-box;
  width: auto;
  font-size: var(--input-font-size);
  font-weight: 500;
  padding: 0 15px;
  border: var(--input-border);
  border-radius: var(--input-border-radius);
  cursor: pointer;
  line-height: normal;
  transition: all 0.3s ease 0s;
}

.Button:focus {
  border-color: var(--input-focus-border-color);
  box-shadow: var(--input-focus-shadow);
}

.Button.Smaller {
  font-size: 12px;
  padding: 0 10px;
  height: 25px;
}

.Button.Disabled:hover {
  box-shadow: none;
}

.Disabled:not(Transparent) {
  background-color: rgba(0, 0, 0, 0.07);
  color: rgba(0, 0, 0, 0.35);
  border: none;
  cursor: auto;
  pointer-events: none; /* necessary for tooltip */
}

.Disabled.Transparent {
  background: transparent;
  border: none;
  color: rgba(0, 0, 0, 0.25);
  cursor: auto;
  pointer-events: none; /* necessary for tooltip */
}

.Button:not(.Transparent):not(.Disabled):hover {
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.17);
}

.Button:not(.Transparent):not(.Disabled).Active {
  box-shadow: 0 8px 8px rgba(0, 0, 0, 0.17);
}
.Button.Transparent.Active:not(.Disabled) {
  background-color: #3d2c43;
  box-shadow: 0 8px 8px rgba(0, 0, 0, 0.17);
}

.Button.Positive {
  background-color: var(--positive-button-color);
  border: none;
  color: var(--light-text-button-color);
}

.Button.Positive.Transparent {
  background: transparent;
  border: none;
  color: var(--positive-button-color);
}
.Button.Positive.Transparent:hover,
.Button.Positive.Transparent.Active {
  background-color: var(--positive-button-active-transparent-color);
  color: var(--positive-button-color);
}

.Button.Negative {
  background-color: var(--negative-button-color);
  border: none;
  color: var(--dark-text-button-color);
}

.Button.Negative.Transparent {
  background: transparent;
  border: none;
  color: var(--dark-text-button-color);
}
.Button.Negative.Transparent:hover,
.Button.Negative.Transparent.Active {
  background-color: var(--negative-button-active-transparent-color);
  color: var(--dark-text-button-color);
}

.Button.Destructive {
  background-color: var(--destructive-button-color);
  border: none;
  color: var(--dark-text-button-color);
}

.Button.Destructive:focus,
.Button.Destructive:hover,
.Button.Destructive.Active {
  background-color: var(--destructive-button-active-color);
  border: none;
  color: var(--light-text-button-color);
}

.Button.Destructive.Transparent {
  background: transparent;
  border: none;
  color: var(--dark-text-button-color);
}

.Button.Destructive.Transparent:hover,
.Button.Destructive.Transparent.Active {
  background-color: var(--destructive-button-active-transparent-color);
  color: var(--destructive-button-active-color);
}

.Button.Payment {
  background-color: var(--payment-button-color);
  border: none;
  color: var(--light-text-button-color);
}

.Button.Payment.Transparent {
  background: transparent;
  border: none;
  color: var(--payment-button-color);
}

.Button.Payment.Transparent:hover,
.Button.Payment.Transparent.Active {
  background-color: var(--payment-button-active-transparent-color);
  color: var(--payment-button-color);
}