.button {
  width: fit-content;
  height: 40px;
  border-radius: var(--button-border-radius);
  color: var(--main-color-2);
  cursor: pointer;

  &:hover {
    box-shadow: 0 8px 16px -4px rgba(0, 0, 0, 0.12), 0 0 1px 0 rgba(0, 0, 0, 0.12);
  }
}

.success {
  background-color: var(--success);
  border: 1px solid var(--success);

  &:active {
    background-color: var(--success-active);
    color: var(--main-color-2)
  }
  &_outline {
    background-color: var(--main-color-2);
    color: var(--success);
    border: 1px solid var(--success);
    &:hover {
      background-color: var(--success-20);
      box-shadow: none;
    }
    &:active {
      background-color: var(--success);
      color: var(--main-color-2);
    }
  }
}

.info {
  background-color: var(--info);
  border: 1px solid var(--info);
  color: var(--main-text-color);

  &:active {
    background-color: var(--info-active)
  }
}

.disabled {
  opacity: .5;
  cursor: not-allowed;
}